<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/Frog_16px_1177822_easyicon.net.ico">
  <link rel="mask-icon" href="/images/Frog_32px_1177822_easyicon.net.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"hxy1997.xyz","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":true,"nav":null,"activeClass":"valine"},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"输入关键字","hits_empty":"没有找到与「${query}」相关搜索","hits_stats":"${hits} 条相关记录，共耗时 ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="TypeScript 由微软在 2012 年 10 月首发，经过几年的发展，已经成为国内外很多前端团队的首选编程语言。前端三大框架中的 Angular 和 Vue 3 也都改用了 TypeScript 开发。即使很多人没直接用过 TypeScript，他们也在通过 VSCode 提供的智能提示功能间接享受着 TypeScript 带来的各项便利。推荐一下电子书深入理解 TypeScript，虽然没">
<meta property="og:type" content="article">
<meta property="og:title" content="TypeScript 源码详细解读">
<meta property="og:url" content="https://hxy1997.xyz/2021/06/28/TypeScript%20%E6%BA%90%E7%A0%81%E8%AF%A6%E7%BB%86%E8%A7%A3%E8%AF%BB/index.html">
<meta property="og:site_name" content="hxy的博客">
<meta property="og:description" content="TypeScript 由微软在 2012 年 10 月首发，经过几年的发展，已经成为国内外很多前端团队的首选编程语言。前端三大框架中的 Angular 和 Vue 3 也都改用了 TypeScript 开发。即使很多人没直接用过 TypeScript，他们也在通过 VSCode 提供的智能提示功能间接享受着 TypeScript 带来的各项便利。推荐一下电子书深入理解 TypeScript，虽然没">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628231648.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628231834.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628231901.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232014.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232056.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232223.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232344.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232422.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628233116.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628233259.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628234716.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628234739.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629000608.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629081708.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629084501.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629084540.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629084704.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629230149.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629231638.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629233823.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210701081630.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210701082142.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210701082208.png">
<meta property="article:published_time" content="2021-06-28T15:12:00.000Z">
<meta property="article:modified_time" content="2021-07-08T00:57:37.347Z">
<meta property="article:author" content="hxy">
<meta property="article:tag" content="编程语言">
<meta property="article:tag" content="Typescript">
<meta property="article:tag" content="源码解读">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628231648.png">

<link rel="canonical" href="https://hxy1997.xyz/2021/06/28/TypeScript%20%E6%BA%90%E7%A0%81%E8%AF%A6%E7%BB%86%E8%A7%A3%E8%AF%BB/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>TypeScript 源码详细解读 | hxy的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="hxy的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">hxy的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Mia san Mia!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/huxingyi1997" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://hxy1997.xyz/2021/06/28/TypeScript%20%E6%BA%90%E7%A0%81%E8%AF%A6%E7%BB%86%E8%A7%A3%E8%AF%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/Robben.gif">
      <meta itemprop="name" content="hxy">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="hxy的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          TypeScript 源码详细解读
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-06-28 23:12:00" itemprop="dateCreated datePublished" datetime="2021-06-28T23:12:00+08:00">2021-06-28</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-07-08 08:57:37" itemprop="dateModified" datetime="2021-07-08T08:57:37+08:00">2021-07-08</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/web%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">web前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="热度" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">热度：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/06/28/TypeScript%20%E6%BA%90%E7%A0%81%E8%AF%A6%E7%BB%86%E8%A7%A3%E8%AF%BB/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/06/28/TypeScript%20%E6%BA%90%E7%A0%81%E8%AF%A6%E7%BB%86%E8%A7%A3%E8%AF%BB/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>TypeScript 由微软在 2012 年 10 月首发，经过几年的发展，已经成为国内外很多前端团队的首选编程语言。前端三大框架中的 Angular 和 Vue 3 也都改用了 TypeScript 开发。即使很多人没直接用过 TypeScript，他们也在通过 VSCode 提供的智能提示功能间接享受着 TypeScript 带来的各项便利。推荐一下电子书<a target="_blank" rel="noopener" href="https://jkchao.github.io/typescript-book-chinese/">深入理解 TypeScript</a>，虽然没看完，一定会抽空阅读。也有大佬们写好的总结，<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/5b5ad5b34376">淡如止水 TypeScript</a>，打算也偷偷复制一份。</p>
<p> 很多人对 TypeScript 背后的原理很感兴趣，你可能想要：</p>
<ul>
<li>更好地理解 TypeScript；</li>
<li>学习编译原理相关的知识来丰富自己（编译器和操作系统是很多程序员的梦想）；</li>
<li>设计一门类似的语言；</li>
<li>定制自己的打包工具；</li>
<li>做一个 VSCode 插件。</li>
</ul>
<p>但你上网搜索，你会发现能搜到的全是 TypeScript 如何使用的教程，即使是英文的资料，也鲜有能完全讲解清楚 TypeScript 内部原理的文章。</p>
<p>只有少数的几篇教程会在文末稍微附带一下原理说明，但它们只是大概阐述了一下 TypeScript 的整体架构，最核心的类型分析的具体实现几乎都是一句带过。</p>
<p>能真正了解 TypeScript 内部原理的人极少，多数人对 TypeScript 的想法是：“这方面的东西和我工作没啥关系，我只管能用就行！”（其实内心的想法是：这东西好烦啊！为什么大家都在用？求你别加功能了，学不动了……）</p>
<p>既然你读到这里了，说明你真的想学习 TypeScript 的内部原理。这篇系列文章不教你如何使用 TypeScript（那种你网上随便一搜，很多），我假设你已经熟悉了 TypeScript 的各种语法，文中不会介绍这些语法的功能，也不探讨这些语法的好坏，只重点介绍 TypeScript 是如何实现这个语法的功能的。这篇系列文章可以帮助你在没学过编译原理之类的书的前提下，真正地学会编译相关的知识。但你必须先做好两点准备：1. 检查这个页面的网址，这篇系列文章由徐林迪(xuld)原创，前三篇在博客园首发，禁随意转载、偷爬，如果需要引用文章内容，请直接链接到这篇文章的地址，不要复制内容。2. TypeScript 核心编译器截止目前一共有 8 万行以上代码，<a target="_blank" rel="noopener" href="https://github.com/Microsoft/TypeScript/tree/master/src/compiler">GIT 源码仓库</a> 超过 1 G，学习 TypeScript 原理是一个漫长的过程，不是几天就可以搞定的，你需要静下心来，而且原理中包含了大量抽象的逻辑，如果你不打算用太久时间，请尽早放弃。</p>
<p>如果有天你问一个“高手”，TypeScript 是怎么写的，“高手”就回复你一句“你去看编译原理的书，比如某某动物书”，那我可以很肯定地告诉你，你的那位“高手”也不懂 TypeScript 的原理。要实现一个 TypeScript ，确实需要一些编译原理的知识，但并不多，TypeScript 的核心是类型分析、流程分析、ES5 语法转换，而这些东西，在传统的 C 编译器之类的领域都是不存在的。所以你去读那些教你怎么写 parser，怎么编译成机器码的传统编译原理的书，是远远不够的。</p>
<span id="more"></span>

<h1 id="1-总览"><a href="#1-总览" class="headerlink" title="1.总览"></a>1.总览</h1><h2 id="理解-TypeScript-项目"><a href="#理解-TypeScript-项目" class="headerlink" title="理解 TypeScript 项目"></a>理解 TypeScript 项目</h2><p>TypeScript 的核心设计者之一也是 C#（念 C 井的请注意了——你的英文能力可能会增加你学习 TypeScript 原理的困难度），Pascal 的核心设计者，TypeScript 有很多地方都借鉴了 C# 的实现，也逐渐给 JavaScript 增加了以前只有 C# 才有的功能。</p>
<p>TypeScript 在微软拥抱开源的大政策下，和社区有良好的互动，我曾经给 TypeScript 提过三个 BUG，TypeScript 团队都能在当天回复，并且在下一个版本中立即修复了。</p>
<p>TypeScript 的目标是：</p>
<ol>
<li>兼容所有 JavaScript 语法，并在此基础扩展语法；</li>
<li>静态分析代码，找出那些很有可能有 BUG 的代码；</li>
<li>生成纯净的、可读的 JavaScript 代码，并且不会对代码作任何优化、处理，甚至连源码中的错误都保留到生成的代码中；</li>
<li>不影响最后运行代码的环境。</li>
</ol>
<p>静态分析代码是 TypeScript 的主要职责，通过静态分析，我们可以得到这些功能：</p>
<ul>
<li>开发中提前知道代码中的可能错误</li>
<li>IDE 中的语法高亮、智能提示、转到定义等功能</li>
<li>重命名变量、提取函数、自动添加导入等高级功能</li>
</ul>
<p>但对于动态脚本语言来说，静态分析是无法做到 100% 准确的，TypeScript 的策略是平衡正确性和实用性。TypeScript 不会确保每处静态分析的结果都是正确的，而是多数情况都是正确的，但他们也提供了两个应对少数情况的解决方案：1. 提供语法允许用户手动修复静态分析的结果（比如用你熟悉的 any）2. 即使源码中存在错误，也可以正常编译。从使用者的角度，只要你不是故意找茬，一般也不会碰到问题。关于正确性和实用性的平衡，你在读后续教程时将会有更深的体会。</p>
<h2 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h2><p>TypeScript 的项目结构如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">├── bin         最终给用户用的 tsc 和 tsserver 命令</span><br><span class="line">├── doc         语言规范文档</span><br><span class="line">├── lib         系统标准库</span><br><span class="line">├── loc         错误文案翻译</span><br><span class="line">├── scripts     开发项目时的一些工具脚本</span><br><span class="line">├── src         源码</span><br><span class="line">│   ├── compiler        编译器源码</span><br><span class="line">│   └── services        语言服务，主要为 VSCode 使用，比如查找定义之类的功能</span><br><span class="line">└── tests       测试文件</span><br></pre></td></tr></table></figure>

<p>TypeScript 编译器的核心代码在 src/compiler，其中以下文件是研究的重点（已经按阅读顺序排序）：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">├── core.ts</span><br><span class="line">├── sys.ts</span><br><span class="line">├── types.ts</span><br><span class="line">├── scanner.ts</span><br><span class="line">├── parser.ts</span><br><span class="line">├── utilities.ts</span><br><span class="line">├── utilitiesPublic.ts</span><br><span class="line">├── binder.ts</span><br><span class="line">├── checker.ts</span><br><span class="line">├── transformer.ts</span><br><span class="line">├── transformers&#x2F;</span><br><span class="line">├── emitter.ts</span><br><span class="line">└── program.ts</span><br></pre></td></tr></table></figure>

<p>核心部分的架构如图：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628231648.png" alt="img"></p>
<h2 id="编译流程"><a href="#编译流程" class="headerlink" title="编译流程"></a>编译流程</h2><p>TypeScript 编译器的目标是把 TypeScript 编译成 JavaScript，这其实和把“英文”翻译成“中文”没有任何区别。</p>
<p>当我们在翻译一段英文到中文时，要做这些事情：</p>
<ol>
<li>理解原文的意义。</li>
<li>将原文的意思用中文重新表述出来。</li>
</ol>
<p>说的再具体一些，是这样的流程：</p>
<ol>
<li>识别原文中的单词、短语；</li>
<li>将这些单词和短语组成一个句子。</li>
<li>参考这个句子所阐述的意义，将原文中的单词和短语全部换成中文的词语；</li>
<li>用中文的语法将这些词语重新组装成一个句子。</li>
</ol>
<p>所以编译器也在做同样的事情，只不过每个步骤我们都给他一个专业的称呼。</p>
<h3 id="1-组词——词法分析"><a href="#1-组词——词法分析" class="headerlink" title="1. 组词——词法分析"></a>1. 组词——词法分析</h3><p>比如句子“我在2009首次创办<strong>个</strong>人网站”中的个，我们在理解时，会自然地将“个人”连在一起，而不是将“办个”连在一起。这就是一个组词的过程。这个句子组词后的结果如图：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628231834.png" alt="img"></p>
<p> TypeScript 是英文编程语言，编译器的组词流程，即将字母拼成单词：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628231901.png" alt="img"></p>
<p>这个过程中，还会跳过代码中的注释、空格，拆出来的词有关键字、有变量名、有数字、也有符号，这些我们统称为<strong>标记</strong>（Token）。</p>
<p>解析标记列表的过程称为词法分析，也叫词法扫描，TypeScript 源码中 scanner.ts 负责完成词法扫描。</p>
<h3 id="2-组句——语法解析"><a href="#2-组句——语法解析" class="headerlink" title="2. 组句——语法解析"></a>2. 组句——语法解析</h3><p>比如句子“<strong>我</strong>在2009首次<strong>创办</strong>个人<strong>网站</strong>”，在词数有限时怎么说和原文意义最接近？结果是——“我创办网站”。你会发现，“在2009”、“首次”是用于修饰“创办”的，“个人”是用于修饰“网站”的，一个句子里面，总是先由一些词构成句子的基本结构，然后再添加其它词使得句子变得更丰富起来，每个词有不同的重要等级。“我”，“创办”，“网站”是一级词，“在2009”、“首次”和“个人”是修饰用的二级词。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232014.png" alt="img"></p>
<p>如上图，一个句子是由有上下级关系的词组成的一个树结构。什么是树结构？树结构就是指先有一个根节点，然后这个节点下面有很多子节点，每个子节点下面又有很多其它子节点（就像中国有很多省，每个省下面有很多市，市下面有你的村）。</p>
<p>在编译器中，将最后语法解析得到的结果称为语法树，TypeScript 源码中 parser.ts 负责解析语法生成语法树。</p>
<p>语法树的根节点代表一份源码文件，根节点下面有很多语句，语句即代码中需要用分号隔开的部分（一般一行一个语句），每个语句下面可能还嵌套了别的语句（比如一个函数，内部包含别的语句）。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232056.png" alt="img"></p>
<p>如果你之前完全没学过编译原理，你可能对语法树还不能很好的理解，没关系，等到第4节的时候，我会更详细地介绍。</p>
<p>如果你之前有学过编译原理相关的东西，你会觉得上面这些讲的太简单了，那准备好了，接下来的内容，是你在其它地方很难学到的东西。</p>
<h3 id="3-提取符号表——作用域分析"><a href="#3-提取符号表——作用域分析" class="headerlink" title="3. 提取符号表——作用域分析"></a>3. 提取符号表——作用域分析</h3><p>比如句子“我在2009首次创办个人网站，<strong>这个</strong>网站到现在都还在维护”，其中的“这个”是一个代词，指代前面出现过的词。平时我们也经常使用代词，甚至有的时候连代词都省略了（比如你的女朋友一开始会跟你说“你滚！”，后来，变成了“滚！”）。在谈话中我们需要记住一些概念的定义，才能理解后续的代词的含义（比如你先得记住前半句提到的个人网站，然后才能理解后面的“这个网站”的含义）。</p>
<p>在代码中，变量是非常常见的，一个变量名称可能指代了一个值、一个函数，或者一个类，这些统称为<strong>符号</strong>（Symbol）。</p>
<p>当用户定义一个变量、函数或类时，就同时定义了一个符号。编译器会先将所有的符号收集起来，建立符号表。当在其他地方使用一个名称时，就查表找出这个名称所代表的符号。</p>
<p>在同一个函数中，不能定义两个同名的变量，但可以定义一个变量和上层的变量重名。函数有一个符号表，其外层也有一个符号表，两个符号表是上下级关系。在函数内部使用一个名称，会先在函数对应的符号表搜索，如果找不到再在外层的符号表继续搜索，如果都找不到就报告：“变量未定义”。</p>
<p>拥有符号表的区域成为词法作用域（Lexical Scope）,比如一个源文件、一个函数、一个语句块（{}）都是一个作用域。在同一个作用域中，不允许有同名的符号，但两个作用域可以存在同名的符号。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232223.png" alt="img"></p>
<p>TypeScript 源码中 binder.ts 负责解析作用域，创建符号表。</p>
<h3 id="4-提取流程图——流程分析"><a href="#4-提取流程图——流程分析" class="headerlink" title="4. 提取流程图——流程分析"></a>4. 提取流程图——流程分析</h3><p>在代码 fn() + gn() 对应的语法树中，fn() 和 gn() 是相邻的两个节点，在执行的时候，它们是有先后顺序的，按每行代码的执行顺序，可以绘制出一份执行流程图。为什么称为流程图而不是流程树？因为习惯上就这么叫——如果回答真这么简单，那你高考咋不考个满分？图——是数学中的专业术语，图和树类似，都是由多个节点及它们之间的关系组成的结构，树结构是一级一级层层向下的，两个节点之间的上下级关系是明确的。如果存在两个节点存在互为上下级关系（即循环引用），那就变成了图。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232344.png" alt="img"></p>
<p>代码中存在循环，在执行的时候，可能存在回到之前执行过的节点的情况，所以称为流程图。</p>
<p>分析流程图有什么用？</p>
<ol>
<li>检测代码中的永远不会执行的代码（比如在 return 之后或者 while(true) 死循环之后的代码）（这些代码在 VSCode 会通过减淡的方式显示）</li>
<li>通过流程分析推导变量的类型，比如出现 if (typeof x === “number”) ，就可以知道 if 内部，x 的类型是数字。</li>
</ol>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628232422.png" alt="img"></p>
<h3 id="5-检查类型错误——语义分析"><a href="#5-检查类型错误——语义分析" class="headerlink" title="5. 检查类型错误——语义分析"></a>5. 检查类型错误——语义分析</h3><p>比如句子“我是你爹”，从语法上是没有错的，它确实表达出了一个意思，但这个意思你可能认为是不对的，这就叫语义错误。</p>
<p>比如 var x = null; x.toString(); 从语法上是正确的代码，可以执行，但执行的时候会发现 x 是空，然后就报错了。</p>
<p>语义分析的目的就是在不执行代码的前提下找出可能在执行过程中出错的代码。</p>
<p>你可能会想，为什么不直接执行代码，执行一下代码错误不就出来了吗？假如你正在哈皮地码代码的时候，还没等你测试，它就已经开始工作——并且删除了你珍藏多年的电影——你会不会奔溃？因为 VSCode 需要有实时分析错误的功能，它为了分析错误，把你写到一半的代码直接拿来执行了……</p>
<p>语义分析的错误种类很多，比如：</p>
<ul>
<li>给 const 变量赋值</li>
<li>调用函数时少了一个参数</li>
<li>一个类继承了自己</li>
<li>……</li>
</ul>
<p>TypeScript 源码中 checker.ts 负责语义分析。checker.ts 的行数超过 3 万，也将是本篇系列文章中重点研究的对象。</p>
<h3 id="6-语法转换——代码优化"><a href="#6-语法转换——代码优化" class="headerlink" title="6. 语法转换——代码优化"></a>6. 语法转换——代码优化</h3><p>TypeScript 提供了编译成 JavaScript 的功能，而且可以编译成 ES3、ES5、ES2020 等不同版本的代码。</p>
<p>要实现这个功能，就必须先将 TypeScript 代码翻译为 ESNext 的语法（即删除所有类型信息），如果用户需要的是旧版本的语法，再将 ESNext 中旧不版本不支持的语法替换掉。</p>
<p>每次转换都是通过一个转换器（Transformer）实现的，转换器的输入是语法树，输出是新的语法树。每个转换器就像工厂里的一道加工流程，原料在流水线被不断加工并最后包装成产品。输入的原始的 TypeScript 语法树也会被不同的转换器处理，最后得到标准的 JavaScript 语法树。</p>
<p>TypeScript 内置了 TS→ESNext、ES7→ES6、ES6→ES5、ES5→ES3 等转换器，用户也可以开发自己的转换器，生成更实用的代码。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628233116.png" alt="img"></p>
<p>TypeScript 源码中 transformer.ts 负责语法转换，不同的转换器源码则在 transformer 文件夹。</p>
<h3 id="7-写入文件——代码生成"><a href="#7-写入文件——代码生成" class="headerlink" title="7. 写入文件——代码生成"></a>7. 写入文件——代码生成</h3><p>经过以上步骤后，现在已经得到了一个最终的语法树，接下来要做的事情很简单——将语法树重新拼装回代码，并保存到文件。</p>
<p>TypeScript 为了保证对代码的影响最少，生成最终代码时还会保留源代码的注释，同时对齐了缩进。</p>
<p>TypeScript 源码中 emitter.ts 负责生成代码。</p>
<p>此外，TypeScript 还会同时生成源映射（Source Map），以及类型描述文件（.d.ts），这些都将在相关章节详细介绍。</p>
<h3 id="8-小结"><a href="#8-小结" class="headerlink" title="8. 小结"></a>8. 小结</h3><p>完整的编译流程如图：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628233259.png" alt="img"></p>
<h1 id="2-词法1-字符处理"><a href="#2-词法1-字符处理" class="headerlink" title="2.词法1-字符处理"></a>2.词法1-字符处理</h1><h2 id="字符"><a href="#字符" class="headerlink" title="字符"></a>字符</h2><p>任何源码都是由很多字符组成的，这些字符可以是字母、数字、空格、符号、汉字等……</p>
<p>每一个字符都有一个编码值，比如字符“a”的编码值是97，字符“林”的编码值是26519。</p>
<p>每个字符对应的编码值是多少是由编码表决定的，上面所示的编码值是全球统一的编码表 Unicode 中的编码值，如果没有特别声明，所有编码值都是以 Unicode 为准的。</p>
<p>一般地，字符的编码值都是有序的，比如字符“a”的编码值是97，字符“b”的编码值是98，字符“c”的编码值是99，汉字则是按照笔划顺序排序的。在给字符串排序时，也是根据每个字符的编码值大小进行排序的。</p>
<p>如果想要判断一个字符是不是英文字母，只需要判断这个字符的编码值是否位于字符“a”的编码值和字符“z”的编码值之间即可。</p>
<p>在 JavaScript 中，可以通过 “a”.charCodeAt(0) 获取字符“a”的编码值；通过 String.fromCharCode(97) 获取指定编码值对应的字符。</p>
<h2 id="CharacterCodes-枚举"><a href="#CharacterCodes-枚举" class="headerlink" title="CharacterCodes 枚举"></a>CharacterCodes 枚举</h2><p>在代码中如果直接写 99，你可能不清楚这个数字的含义，但如果写成 CharacterCodes.c，你就可以很快明白。通过枚举给每个编码值定义一个名称，方便读者理解，同时我们也不需要去记忆每个字符的实际编码值。CharacterCodes 枚举位于 tsc/src/compiler/types.ts，源码如下：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @internal */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="built_in">enum</span> CharacterCodes &#123;</span><br><span class="line">    _0 = <span class="number">0x30</span>,</span><br><span class="line">    _1 = <span class="number">0x31</span>,</span><br><span class="line">    <span class="comment">// ...(略)</span></span><br><span class="line">    _9 = <span class="number">0x39</span>,</span><br><span class="line"></span><br><span class="line">    a = <span class="number">0x61</span>,</span><br><span class="line">    b = <span class="number">0x62</span>,<span class="comment">// ...(略)</span></span><br><span class="line">    z = <span class="number">0x7A</span>,</span><br><span class="line"></span><br><span class="line">    A = <span class="number">0x41</span>,<span class="comment">// ...(略)</span></span><br><span class="line">    Z = <span class="number">0x5a</span>,</span><br><span class="line"></span><br><span class="line">    ampersand = <span class="number">0x26</span>,             <span class="comment">// &amp;</span></span><br><span class="line">    asterisk = <span class="number">0x2A</span>,              <span class="comment">// *</span></span><br><span class="line">    <span class="comment">// ...(略)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="字符判断"><a href="#字符判断" class="headerlink" title="字符判断"></a>字符判断</h2><p>要判断一个字符是不是数字字符，只需确认它的字符编码是不是在“0”和“9”的编码值之间：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isDigit</span>(<span class="params">ch: <span class="built_in">number</span></span>): <span class="title">boolean</span> </span>&#123;  <span class="comment">// 参数 ch 表示一个编码值</span></span><br><span class="line">    <span class="keyword">return</span> ch &gt;= CharacterCodes._0 &amp;&amp; ch &lt;= CharacterCodes._9;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>同理，还可以判断其它字符，比如判断是不是换行符：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">isLineBreak</span>(<span class="params">ch: <span class="built_in">number</span></span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="comment">// ES5 7.3:</span></span><br><span class="line">    <span class="comment">// The ECMAScript line terminator characters are listed in Table 3.</span></span><br><span class="line">    <span class="comment">//     Table 3: Line Terminator Characters</span></span><br><span class="line">    <span class="comment">//     Code Unit Value     Name                    Formal Name</span></span><br><span class="line">    <span class="comment">//     \u000A              Line Feed               &lt;LF&gt;</span></span><br><span class="line">    <span class="comment">//     \u000D              Carriage Return         &lt;CR&gt;</span></span><br><span class="line">    <span class="comment">//     \u2028              Line separator          &lt;LS&gt;</span></span><br><span class="line">    <span class="comment">//     \u2029              Paragraph separator     &lt;PS&gt;</span></span><br><span class="line">    <span class="comment">// Only the characters in Table 3 are treated as line terminators. Other new line or line</span></span><br><span class="line">    <span class="comment">// breaking characters are treated as white space but not as line terminators.</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> ch === CharacterCodes.lineFeed ||</span><br><span class="line">        ch === CharacterCodes.carriageReturn ||</span><br><span class="line">        ch === CharacterCodes.lineSeparator ||</span><br><span class="line">        ch === CharacterCodes.paragraphSeparator;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>根据 ES 规范，换行符一共有 4 个，虽然平常我们只使用前两个，但对有些语言来说，后两个也是需要的。</p>
<p>判断是不是空格：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">isWhiteSpaceLike</span>(<span class="params">ch: <span class="built_in">number</span></span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> isWhiteSpaceSingleLine(ch) || isLineBreak(ch);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/** Does not include line breaks. For that, see isWhiteSpaceLike. */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">isWhiteSpaceSingleLine</span>(<span class="params">ch: <span class="built_in">number</span></span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="comment">// Note: nextLine is in the Zs space, and should be considered to be a whitespace.</span></span><br><span class="line">    <span class="comment">// It is explicitly not a line-break as it isn&#x27;t in the exact set specified by EcmaScript.</span></span><br><span class="line">    <span class="keyword">return</span> ch === CharacterCodes.space ||</span><br><span class="line">        ch === CharacterCodes.tab ||</span><br><span class="line">        ch === CharacterCodes.verticalTab ||</span><br><span class="line">        ch === CharacterCodes.formFeed ||</span><br><span class="line">        ch === CharacterCodes.nonBreakingSpace ||</span><br><span class="line">        ch === CharacterCodes.nextLine ||</span><br><span class="line">        ch === CharacterCodes.ogham ||</span><br><span class="line">        ch &gt;= CharacterCodes.enQuad &amp;&amp; ch &lt;= CharacterCodes.zeroWidthSpace ||</span><br><span class="line">        ch === CharacterCodes.narrowNoBreakSpace ||</span><br><span class="line">        ch === CharacterCodes.mathematicalSpace ||</span><br><span class="line">        ch === CharacterCodes.ideographicSpace ||</span><br><span class="line">        ch === CharacterCodes.byteOrderMark;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>有的地方需要把换行当空格处理，有的地方不需要，所以 TypeScript 拆成两个函数，一个包括换行符，一个不包括。</p>
<h2 id="判断标识符（Identifier）"><a href="#判断标识符（Identifier）" class="headerlink" title="判断标识符（Identifier）"></a>判断标识符（Identifier）</h2><p>标识符即俗称的变量名，我们都知道 JS 中变量名是不能随便取的，是有规则的，比如开头不能是数字。</p>
<p>在 ES 规范中，明确地点名了：哪些字符可以做标识符；哪些字符可以做标识符但不能以它开头。TypeScript 实现了 isUnicodeIdentifierStart 和 isUnicodeIdentifierPart 来分别判断。</p>
<p>哪些字符可以做标识符，其实是没有简单的规律的，这些都是在 ES 规范一个个手动指定的，规范中这个列表很长，最简单的实现就是：手动记录每个字符是否允许作标识符，然后查表。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628234716.png" alt="img"></p>
<p>不过字符很多，每个字符单独记录要占用很大空间，所以 TypeScript 设计了一个小算法来压缩内存，算法基于这么一个事实：一般地，允许作为标识符的字符都是连续的一段（比如“a”到“z”）。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210628234739.png" alt="img"></p>
<p>只要记录每段的开头和结尾部分，就可以比原先的记录该段的所有字符，要更节约内存。</p>
<p>将所有开始位置和结束位置放在同一个数组，数组的奇数位即图中的蓝色段，表示每段开头，偶数位即绿色段，表示每段结尾。</p>
<p>当需要查找一个字符是不是标识符时，采用二分搜索算法，快速定位确认它是否在包含的段中。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> unicodeESNextIdentifierStart = [<span class="number">65</span>, <span class="number">90</span>, <span class="number">97</span>, <span class="number">122</span>, <span class="number">170</span>, <span class="comment">/*...(略) */</span>, <span class="number">194560</span>, <span class="number">195101</span>]</span><br><span class="line"><span class="keyword">const</span> unicodeESNextIdentifierPart = [<span class="number">48</span>, <span class="number">57</span>, <span class="number">65</span>,  <span class="comment">/*...(略) */</span>, <span class="number">917999</span>]</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">lookupInUnicodeMap</span>(<span class="params">code: <span class="built_in">number</span>, map: <span class="keyword">readonly</span> <span class="built_in">number</span>[]</span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="comment">// 由于代码中多数字符还是英文字符，如果是就不查表直接判断</span></span><br><span class="line">    <span class="comment">// Bail out quickly if it couldn&#x27;t possibly be in the map.</span></span><br><span class="line">    <span class="keyword">if</span> (code &lt; map[<span class="number">0</span>]) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 以下是标准二分搜索算法，不懂的同学请自己补课</span></span><br><span class="line">    <span class="comment">// Perform binary search in one of the Unicode range maps</span></span><br><span class="line">    <span class="keyword">let</span> lo = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> hi: <span class="built_in">number</span> = map.length;</span><br><span class="line">    <span class="keyword">let</span> mid: <span class="built_in">number</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (lo + <span class="number">1</span> &lt; hi) &#123;</span><br><span class="line">        mid = lo + (hi - lo) / <span class="number">2</span>;</span><br><span class="line">        <span class="comment">// mid has to be even to catch a range&#x27;s beginning</span></span><br><span class="line">        mid -= mid % <span class="number">2</span>;</span><br><span class="line">        <span class="keyword">if</span> (map[mid] &lt;= code &amp;&amp; code &lt;= map[mid + <span class="number">1</span>]) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (code &lt; map[mid]) &#123;</span><br><span class="line">            hi = mid;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            lo = mid + <span class="number">2</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>接下来就可以看明白 isUnicodeIdentifierStart 和 isUnicodeIdentifierPart 这两个函数了</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @internal */</span> <span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">isUnicodeIdentifierStart</span>(<span class="params">code: <span class="built_in">number</span>, languageVersion: ScriptTarget | <span class="literal">undefined</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> languageVersion! &gt;= ScriptTarget.ES2015 ?</span><br><span class="line">        lookupInUnicodeMap(code, unicodeESNextIdentifierStart) :</span><br><span class="line">        languageVersion! === ScriptTarget.ES5 ? lookupInUnicodeMap(code, unicodeES5IdentifierStart) :</span><br><span class="line">        lookupInUnicodeMap(code, unicodeES3IdentifierStart);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isUnicodeIdentifierPart</span>(<span class="params">code: <span class="built_in">number</span>, languageVersion: ScriptTarget | <span class="literal">undefined</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> languageVersion! &gt;= ScriptTarget.ES2015 ?</span><br><span class="line">        lookupInUnicodeMap(code, unicodeESNextIdentifierPart) :</span><br><span class="line">        languageVersion! === ScriptTarget.ES5 ? lookupInUnicodeMap(code, unicodeES5IdentifierPart) :</span><br><span class="line">        lookupInUnicodeMap(code, unicodeES3IdentifierPart);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>由于 TypeScript 支持不同版本的 ES 代码，且不同版本的 ES 规范对标识符的定义有细微查表，所以 TypeScript 内部准备了不同版本的表。</p>
<p>通过以上俩函数的结合，也就可以判断一个字符串是不是合法的标识符了：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @internal */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">isIdentifierText</span>(<span class="params">name: <span class="built_in">string</span>, languageVersion: ScriptTarget | <span class="literal">undefined</span></span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> ch = codePointAt(name, <span class="number">0</span>);</span><br><span class="line">    <span class="keyword">if</span> (!isIdentifierStart(ch, languageVersion)) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = charSize(ch); i &lt; name.length; i += charSize(ch)) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!isIdentifierPart(ch = codePointAt(name, i), languageVersion)) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="行列号和索引"><a href="#行列号和索引" class="headerlink" title="行列号和索引"></a>行列号和索引</h2><p>如果将源码看成字符串，每个字符都有一个字符串的下标索引，同时这个字符又可以理解为源码中的第几行第几列。</p>
<p>给定一个字符串的索引，可以通过扫描这个索引之前有几个换行符确定这个索引属于第几行第几列，反过来，通过行列号也可以确认这个位置对应的字符串索引。</p>
<p>在源码中如果发现一个错误，编译器需要向用户报告错误，并明确指出位置，一般地，编译器需要将错误的行列报出来（如果报的是索引那你自己慢慢数……），为了能够在报错时知道这些位置，编译器在词法扫描阶段就需要保存一切源码位置了，那编译器存的是行列号还是索引呢？</p>
<p>有的编译器选择了存行列号，因为行列号才是用户最后需要的，但行列号意味着需要两个字段存储这个信息，如果将它们分别处理，每次处理行列号的地方都需要两行代码，如果将它们合并为一个对象，这在 JavaScript 引擎中会造成大量的引用对象，影响性能。因此 TypeScript 选择：存储索引。出错的时候，再将索引换算成行列号显示出来。</p>
<p>TypeScript 用 Position（位置）这个术语表示索引，用 LineAndCharacter（行和字符）这个术语表示行列号。这三者都是从 0 开始计数的，即 line = 0 表示第一行。</p>
<p>为什么是 LineAndCharacter 而不是 LineAndColumn(行列），主要为了和 VSCode 中的 LineColumn 区分，多数情况，LineAndCharacter 和 LineAndColumn 是一样的，除非碰到制表符（TAB）缩进，一个 TAB 始终是一个字符，但它可能跨越 2 列、4 列、8列等（具体根据用户配置）。TypeScript 并不在意 TAB 这个字符，统一将它当一个字符处理可以简单许多，所以为了避免和 VSCode 的行列混淆，改用了别的称呼。</p>
<p>基于索引计算行列号需要遍历这个索引之前的所有字符，为了加速计算，TypeScript 作了一个小优化：缓存每行第一个字符的索引，然后通过二分搜索查找对应的行列（又是二分？）</p>
<p>首先计算每行第一个字符的索引表：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @internal */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">computeLineStarts</span>(<span class="params">text: <span class="built_in">string</span></span>): <span class="title">number</span>[] </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> result: <span class="built_in">number</span>[] = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line">    <span class="keyword">let</span> pos = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> lineStart = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">while</span> (pos &lt; text.length) &#123;</span><br><span class="line">        <span class="keyword">const</span> ch = text.charCodeAt(pos);</span><br><span class="line">        pos++;</span><br><span class="line">        <span class="keyword">switch</span> (ch) &#123;</span><br><span class="line">            <span class="keyword">case</span> CharacterCodes.carriageReturn:</span><br><span class="line">                <span class="keyword">if</span> (text.charCodeAt(pos) === CharacterCodes.lineFeed) &#123;</span><br><span class="line">                    pos++;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="comment">// falls through</span></span><br><span class="line">            <span class="keyword">case</span> CharacterCodes.lineFeed:</span><br><span class="line">                result.push(lineStart);</span><br><span class="line">                lineStart = pos;</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">default</span>:</span><br><span class="line">                <span class="keyword">if</span> (ch &gt; CharacterCodes.maxAsciiCharacter &amp;&amp; isLineBreak(ch)) &#123;</span><br><span class="line">                    result.push(lineStart);</span><br><span class="line">                    lineStart = pos;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    result.push(lineStart);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>然后检索索引表查询行列号：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @internal */</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * We assume the first line starts at position 0 and &#x27;position&#x27; is non-negative.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">computeLineAndCharacterOfPosition</span>(<span class="params">lineStarts: <span class="keyword">readonly</span> <span class="built_in">number</span>[], position: <span class="built_in">number</span></span>): <span class="title">LineAndCharacter</span> </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> lineNumber = binarySearch(lineStarts, position, identity, compareValues);</span><br><span class="line">    <span class="keyword">if</span> (lineNumber &lt; <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="comment">// If the actual position was not found,</span></span><br><span class="line">        <span class="comment">// the binary search returns the 2&#x27;s-complement of the next line start</span></span><br><span class="line">        <span class="comment">// e.g. if the line starts at [5, 10, 23, 80] and the position requested was 20</span></span><br><span class="line">        <span class="comment">// then the search will return -2.</span></span><br><span class="line">        <span class="comment">//</span></span><br><span class="line">        <span class="comment">// We want the index of the previous line start, so we subtract 1.</span></span><br><span class="line">        <span class="comment">// Review 2&#x27;s-complement if this is confusing.</span></span><br><span class="line">        lineNumber = ~lineNumber - <span class="number">1</span>;</span><br><span class="line">        Debug.assert(lineNumber !== -<span class="number">1</span>, <span class="string">&quot;position cannot precede the beginning of the file&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        line: lineNumber,</span><br><span class="line">        character: position - lineStarts[lineNumber]</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>同时使用索引表也可以实现从行列号查询索引：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @internal */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">computePositionOfLineAndCharacter</span>(<span class="params">lineStarts: <span class="keyword">readonly</span> <span class="built_in">number</span>[], line: <span class="built_in">number</span>, character: <span class="built_in">number</span>, debugText?: <span class="built_in">string</span>, allowEdits?: <span class="literal">true</span></span>): <span class="title">number</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (line &lt; <span class="number">0</span> || line &gt;= lineStarts.length) &#123;</span><br><span class="line">        <span class="keyword">if</span> (allowEdits) &#123;</span><br><span class="line">            <span class="comment">// Clamp line to nearest allowable value</span></span><br><span class="line">            line = line &lt; <span class="number">0</span> ? <span class="number">0</span> : line &gt;= lineStarts.length ? lineStarts.length - <span class="number">1</span> : line;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line">            Debug.fail(<span class="string">`Bad line number. Line: <span class="subst">$&#123;line&#125;</span>, lineStarts.length: <span class="subst">$&#123;lineStarts.length&#125;</span> , line map is correct? <span class="subst">$&#123;debugText !== <span class="literal">undefined</span> ? arraysEqual(lineStarts, computeLineStarts(debugText)) : <span class="string">&quot;unknown&quot;</span>&#125;</span>`</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> res = lineStarts[line] + character;</span><br><span class="line">    <span class="keyword">if</span> (allowEdits) &#123;</span><br><span class="line">        <span class="comment">// Clamp to nearest allowable values to allow the underlying to be edited without crashing (accuracy is lost, instead)</span></span><br><span class="line">        <span class="comment">// <span class="doctag">TODO:</span> Somehow track edits between file as it was during the creation of sourcemap we have and the current file and</span></span><br><span class="line">        <span class="comment">// apply them to the computed position to improve accuracy</span></span><br><span class="line">        <span class="keyword">return</span> res &gt; lineStarts[line + <span class="number">1</span>] ? lineStarts[line + <span class="number">1</span>] : <span class="keyword">typeof</span> debugText === <span class="string">&quot;string&quot;</span> &amp;&amp; res &gt; debugText.length ? debugText.length : res;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (line &lt; lineStarts.length - <span class="number">1</span>) &#123;</span><br><span class="line">        Debug.assert(res &lt; lineStarts[line + <span class="number">1</span>]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span> (debugText !== <span class="literal">undefined</span>) &#123;</span><br><span class="line">        Debug.assert(res &lt;= debugText.length); <span class="comment">// Allow single character overflow for trailing newline</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>本节介绍了 scanner 中的一些独立函数，这些函数都将被词法扫描程序中调用。先独立理解了这些概念，对完全理解词法扫描会有重大帮助。</p>
<h1 id="3-词法2-标记解析"><a href="#3-词法2-标记解析" class="headerlink" title="3.词法2-标记解析"></a>3.词法2-标记解析</h1><p>上一节主要介绍了单个字符的处理，现在我们已经有了对单个字符分析的能力，比如：</p>
<ul>
<li>判断字符是否是换行符：isLineBreak</li>
<li>判断字符是否是空格：isWhiteSpaceSingleLine</li>
<li>判断字符是否是数字：isDigit</li>
<li>判断字符是否是标识符（变量名）：<ul>
<li>标识符开头部分：isIdentifierStart</li>
<li>标识符主体部分：isIdentifierPart</li>
</ul>
</li>
<li>同时还可以通过 char === CharacterCodes.hash 方式判断其它字符</li>
</ul>
<p>接下来，需要利用字符组装标记。</p>
<h2 id="标记（Token"><a href="#标记（Token" class="headerlink" title="标记（Token)"></a>标记（Token)</h2><p>标记可以是一个变量名、一个符号或一个关键字。</p>
<p>比如代码 var x = String.fromCharCode(100); 中，一共可解析出以下标记：</p>
<ol>
<li>var 关键字标记</li>
<li>标识符标记(内容是 x)</li>
<li>等号标记(=)</li>
<li>标识符标记(内容是 String)</li>
<li>点标记(.)</li>
<li>标识符标记(内容是 fromCharCode)</li>
<li>左括号标记(()</li>
<li>数字标记(内容是 100)</li>
<li>右括号标记())</li>
<li>分号标记(;)</li>
</ol>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629000608.png" alt="img"></p>
<p>为什么有些字符会组成一个标记，而有些字符又不行呢？</p>
<p>可以这么理解：标记里的字符一定是不能拆开的，就像“东西”这个词是一个最小的整体，如果拆成两个字，就不能表达原来的意思了。</p>
<p>比如代码 0.1.toString 中，包含以下标记：</p>
<ol>
<li>数字标记(0.1)</li>
<li>点标记(.)</li>
<li>标识符标记(内容是 toString)</li>
</ol>
<p>前面的点紧跟数字，是小数的一部分，所以和数字一起作为一个标记。当点不紧跟数字时，也可以作独立标记使用。</p>
<p>代码中的字符串，不管内容有多长，都将被解析为一个字符串标记。</p>
<p>++ 是一个独立的加加标记，而 + + (中间差一个空格)是两个加标记。</p>
<p>为什么标记需要按这个规则解析？因为 ES 规范就这么规定的。在英文编程语言中，一般都是用空格来分割标记的，两个标记如果缺少空格，它们可能被组成新的标记。当然并不是随便两个字符就可以组成新标记，比如 !! 和 ! ! 都被解析成两个感叹号标记，因为根本不存在双感叹号标记。</p>
<p>关键字和普通的标识符都是一个单词，为什么关键字有特殊的标记类型，而其它单词统称为标识符呢？</p>
<p>主要为了方便后续解析，之后判断单词是否是关键字时，只需判断标记类型，而不是很麻烦地先判断是否是标识符再判断标识符的内容。</p>
<p>每个标记在源码中都有固定的位置，如果将源码看成字符串，那么这个标记第一个字符在字符串中的索引就是标记的开始位置，最后一个字符对应的就是结束位置。</p>
<p>在解析每个标记时，会跳过标记之间的空格、注释。如果把每个标记之前、上一个标记之后的空格、注释包括进来，这个标记的位置即标记的完整开始位置。一个标记的完整开始位置等同于上一个标记的结束位置</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629081708.png" alt="img"></p>
<p>综上，任何源码都可以被解析成一串标记组成的数组，每个标记都有这些属性：</p>
<ul>
<li>标记的类型（区分这是关键字、还是标识符、还是其它的符号）</li>
<li>标记的内容（针对标识符、字符串、数字等标记类型，获取其真实的内容</li>
<li>标记的开始位置</li>
<li>标记的结束位置</li>
<li>标记的完整开始位置</li>
</ul>
<p>在 TS 源码中，用 SyntaxKind 枚举列出了所有标记类型：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="built_in">enum</span> SyntaxKind &#123;</span><br><span class="line">    CloseBraceToken,</span><br><span class="line">    OpenParenToken,</span><br><span class="line">    CloseParenToken,</span><br><span class="line">    OpenBracketToken,</span><br><span class="line">    <span class="comment">// ...(略)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>同时，这些标记类型的值也有一个约定，即关键字标记都被放在一起，这样就可以很轻松地通过标记类型判断是否是关键字：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">isKeyword</span>(<span class="params">token: SyntaxKind</span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> SyntaxKind.FirstKeyword &lt;= token &amp;&amp; token &lt;= SyntaxKind.LastKeyword;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>同理还有很多的类似判断，它们被放在了 tsc/src/compiler/utilities.ts 中。</p>
<p>TS 内部统一使用 SyntaxKind 存储标记类型（SyntaxKind 本质是数字，这样比较起来性能最高），为了方便报错时显示，TS 还内置了从文本内容获取标记类型和还原标记类型为文本内容的工具函数：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> textToToken = createMapFromTemplate&lt;SyntaxKind&gt;(&#123;</span><br><span class="line">    ...textToKeywordObj,</span><br><span class="line">    <span class="string">&quot;&#123;&quot;</span>: SyntaxKind.OpenBraceToken,</span><br><span class="line">    <span class="comment">// ...(略)</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> tokenStrings = makeReverseMap(textToToken);</span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">tokenToString</span>(<span class="params">t: SyntaxKind</span>): <span class="title">string</span> | <span class="title">undefined</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> tokenStrings[t];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* @internal */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">stringToToken</span>(<span class="params">s: <span class="built_in">string</span></span>): <span class="title">SyntaxKind</span> | <span class="title">undefined</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> textToToken.get(s);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="扫描器（Scanner）"><a href="#扫描器（Scanner）" class="headerlink" title="扫描器（Scanner）"></a>扫描器（Scanner）</h2><p>一份代码中，一般会解析出上千个标记。如果将每个标记都存下来就会消耗大量的内存，而就像你读文章时，你只要盯着当前正在读的这几行字，而不需要将全文的字都记下来一样，解析代码时，也只需要知道当前正在读的标记，之前已经理解过的标记不需要再记下来。所以实践上出于性能考虑，采用扫描的方式逐个读取标记，而不是一口气将所有标记先读出来放在数组里。</p>
<p>什么是扫描的方式？即有一个全局变量，每调用一次扫描函数(scan())，这个变量的值就会被更新为下一个标记的信息。你可以从这个变量获取当前标记的信息，然后调用一次 scan() ，再重新从这个变量获取下一个标记的信息（当然这时候不能再读取之前的标记信息了）。</p>
<p>Scanner 类提供了以上所说的所有功能：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> Scanner &#123;</span><br><span class="line">    setText(text: <span class="built_in">string</span>, start?: <span class="built_in">number</span>, length?: <span class="built_in">number</span>): <span class="built_in">void</span>; <span class="comment">// 设置当前扫描的源码</span></span><br><span class="line">    scan(): SyntaxKind; <span class="comment">// 扫描下一个标记</span></span><br><span class="line">    getToken(): SyntaxKind; <span class="comment">// 获取当前标记的类型</span></span><br><span class="line">    getStartPos(): <span class="built_in">number</span>; <span class="comment">// 获取当前标记的完整开始位置</span></span><br><span class="line">    getTokenPos(): <span class="built_in">number</span>; <span class="comment">// 获取当前标记的开始位置</span></span><br><span class="line">    getTextPos(): <span class="built_in">number</span>; <span class="comment">// 获取当前标记的结束位置</span></span><br><span class="line">    getTokenText(): <span class="built_in">string</span>; <span class="comment">// 获取当前标记的源码</span></span><br><span class="line">    getTokenValue(): <span class="built_in">string</span>; <span class="comment">// 获取当前标记的内容。如果标记是数字，获取计算后的值；如果标记是字符串，获取处理转义字符后的内容</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如果你已经理解了 Scanner 的设计原理，那就可以回答这个问题：如何使用 Scanner 打印一个代码里的所有标记？</p>
<p>你可以先思考几分钟，然后看答案：</p>
<p>以下是可以直接在 Node 运行的代码，你可以直接断点调试看 TS 是如何完成标记解析的任务的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ts = <span class="built_in">require</span>(<span class="string">&quot;typescript&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> scanner = ts.createScanner(ts.ScriptTarget.ESNext, <span class="literal">true</span>)</span><br><span class="line">scanner.setText(<span class="string">`var x = String.fromCharCode(100);`</span>)</span><br><span class="line"><span class="keyword">while</span> (scanner.scan() !== ts.SyntaxKind.EndOfFileToken) &#123; <span class="comment">// EndOfFileToken 表示结束</span></span><br><span class="line">    <span class="keyword">const</span> tokenType = scanner.getToken() <span class="comment">// 标记类型编码</span></span><br><span class="line">    <span class="keyword">const</span> start = scanner.getTokenPos() <span class="comment">// 开始位置</span></span><br><span class="line">    <span class="keyword">const</span> end = scanner.getTextPos() <span class="comment">// 结束位置</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> tokenName = ts.tokenToString(tokenType) <span class="comment">// 转为可读的标记名</span></span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`在 <span class="subst">$&#123;start&#125;</span>-<span class="subst">$&#123;end&#125;</span> 发现了标记：<span class="subst">$&#123;tokenName&#125;</span>`</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="扫描器实现"><a href="#扫描器实现" class="headerlink" title="扫描器实现"></a>扫描器实现</h2><p>TS 早期是使用面向对象的类开发的，从 1.0 开始，为了适配 JS 引擎的性能，所有源码已经没有类了，全部改用函数闭包。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">createScanner</span>(<span class="params">languageVersion: ScriptTarget, skipTrivia: <span class="built_in">boolean</span>, <span class="comment">/**...(略) */</span></span>): <span class="title">Scanner</span> </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> text = textInitial!; <span class="comment">// 当前要扫描的源码</span></span><br><span class="line">    <span class="keyword">let</span> pos: <span class="built_in">number</span>; <span class="comment">// 当前位置</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 以下是一些“全局”变量，存储当前标记的信息</span></span><br><span class="line">    <span class="keyword">let</span> end: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">let</span> startPos: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">let</span> tokenPos: <span class="built_in">number</span>;</span><br><span class="line">    <span class="keyword">let</span> token: SyntaxKind;</span><br><span class="line">    <span class="keyword">let</span> tokenValue!: <span class="built_in">string</span>;</span><br><span class="line">    <span class="keyword">let</span> tokenFlags: TokenFlags;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...(略)</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> scanner: Scanner = &#123;</span><br><span class="line">        getStartPos: <span class="function">() =&gt;</span> startPos,</span><br><span class="line">        getTextPos: <span class="function">() =&gt;</span> pos,</span><br><span class="line">        getToken: <span class="function">() =&gt;</span> token,</span><br><span class="line">        getTokenPos: <span class="function">() =&gt;</span> tokenPos,</span><br><span class="line">        getTokenText: <span class="function">() =&gt;</span> text.substring(tokenPos, pos),</span><br><span class="line">        getTokenValue: <span class="function">() =&gt;</span> tokenValue,</span><br><span class="line">        <span class="comment">// ...(略)</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> scanner;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 这里是具体实现的函数，函数可以直接访问上面这些“全局”变量</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>核心的扫描函数如下：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">scan</span>(<span class="params"></span>): <span class="title">SyntaxKind</span> </span>&#123;</span><br><span class="line">    startPos = pos; <span class="comment">// 记录扫描之前的位置</span></span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">        <span class="comment">// 这是一个大循环</span></span><br><span class="line">        <span class="comment">// 如果发现空格、注释，会重新循环（此时重新设置 tokenPos，即让 tokenPos 忽略了空格）</span></span><br><span class="line">        <span class="comment">// 如果发现一个标记，则退出函数</span></span><br><span class="line">        tokenPos = pos;</span><br><span class="line">        <span class="comment">// 到字符串末尾，返回结束标记</span></span><br><span class="line">        <span class="keyword">if</span> (pos &gt;= end) &#123;</span><br><span class="line">            <span class="keyword">return</span> token = SyntaxKind.EndOfFileToken;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 获取当前字符的编码</span></span><br><span class="line">        <span class="keyword">let</span> ch = codePointAt(text, pos);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">switch</span> (ch) &#123;</span><br><span class="line">            <span class="comment">// 接下来就开始判断不同的字符可能并组装标记</span></span><br><span class="line">            <span class="keyword">case</span> CharacterCodes.exclamation: <span class="comment">// 感叹号(!)</span></span><br><span class="line">                <span class="keyword">if</span> (text.charCodeAt(pos + <span class="number">1</span>) === CharacterCodes.equals) &#123; <span class="comment">// 后面是不是“=”</span></span><br><span class="line">                    <span class="keyword">if</span> (text.charCodeAt(pos + <span class="number">2</span>) === CharacterCodes.equals) &#123; <span class="comment">// 后面是不是还是“=”</span></span><br><span class="line">                        <span class="keyword">return</span> pos += <span class="number">3</span>, token = SyntaxKind.ExclamationEqualsEqualsToken; <span class="comment">// 获得“!==”标记</span></span><br><span class="line">                    &#125;</span><br><span class="line">                    <span class="keyword">return</span> pos += <span class="number">2</span>, token = SyntaxKind.ExclamationEqualsToken; <span class="comment">// 获得“!=”标记</span></span><br><span class="line">                &#125;</span><br><span class="line">                pos++;</span><br><span class="line">                <span class="keyword">return</span> token = SyntaxKind.ExclamationToken; <span class="comment">//获得“!”标记</span></span><br><span class="line">            <span class="keyword">case</span> CharacterCodes.doubleQuote:</span><br><span class="line">            <span class="keyword">case</span> CharacterCodes.singleQuote:</span><br><span class="line">                <span class="comment">// ...(略)</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>扫描的步骤很简单：先判断是什么字符，然后尝试组成标记。</p>
<p>标记的种类繁多，所以这部分源码也很长，但都是大同小异的判断，这里不再赘述（相信即使写了你也会快速跳过），有兴趣的自行读源码。</p>
<p>这里列出一些需要注意的点：</p>
<ol>
<li><p>并不是所有字符都是源码的一部分，所以，可能在扫描时对有些字符报错。</p>
</li>
<li><p>最开头的 #! (Shebang)会被忽略（这部分虽然暂时没入ES 标准（发文时属于 Stage 2），但多数引擎都会忽略它）</p>
</li>
<li><p>为了支持自动插入分号，扫描时还同时记录了当前标记之前有没有换行的信息。 </p>
</li>
<li><p>TS 很贴心地考虑 GIT 合并冲突问题。</p>
</li>
</ol>
<p>如果一个文件出现 GIT 合并冲突，GIT 会自动在该文件插入一些冲突标记，如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD</span><br><span class="line">这是我的代码</span><br><span class="line">&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;</span><br><span class="line">这是别人提交的代码</span><br><span class="line">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><br></pre></td></tr></table></figure>

<p>TS 在扫描到 &lt;&lt;&lt;&lt;&lt;&lt;&lt; 后（正常的代码不太可能出现），会将这段代码识别为冲突标记，并在词法扫描时自动忽略冲突的第二段，相当于屏蔽了冲突代码，而不是将冲突标记看成代码的一部分然后报很多错。这样，即使代码存在冲突，当你在修改第一段代码时，不会受任何影响（包括智能提示等），但因为第二段被直接忽略，所以修改第二段代码不会有智能提示，只有语法高亮。</p>
<h2 id="重新扫描问题"><a href="#重新扫描问题" class="headerlink" title="重新扫描问题"></a>重新扫描问题</h2><p>正则表达式和字符串一样，是不可拆分的一种标记，当碰到 / 后，它可能是除号，也可能是正则表达式的开头。在扫描阶段还无法确定它的真正意义。</p>
<p>有的人可能会说除号也可以通过扫描后面有没有新的除号（因为正则表达式肯定是一对除号）判断它是不是正则，这是不对的：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span> / <span class="number">2</span> / <span class="number">3</span> <span class="comment">// 虽然出现了两个除号，但不是正则</span></span><br></pre></td></tr></table></figure>

<p>实际上需要区分除号是不是正则，是看除号之前有没有存在表达式，这是在语法解析阶段才能知道的事情。因此在词法扫描阶段，直接不考虑正则，除号可能是除号(/)、除号等于(/=)、注释(//)。</p>
<p>当在语法扫描时，发现此处需要的是一个独立的表达式，而不可能是除号时，调用 scanner.reScanSlashToken()，将当前除号标记重新按正则扫描。</p>
<p>类似地、&lt; 可能是小于号，也可能是 JSX 的开头。模板 <code>x$&#123;...&#125;</code> 中的 } 可能是右半括号，也可能是模板字面量的最后一部分，这些都需要在语法分析阶段区分，需要提供重新扫描的方法。</p>
<h2 id="预览标记"><a href="#预览标记" class="headerlink" title="预览标记"></a>预览标记</h2><p>TS 引入了很多关键字，但为了兼容 JS，这些关键字只有在特定场合才能作关键字，比如 public 后跟 class，才把 public 作关键字（这样不影响本来是正确的 JS 代码：var public = 0）。</p>
<p>这时，在语法分析时，就要先预览下一个标记是什么，才能决定如何处理当前的标记。</p>
<p>scanner 提供了 lookAhead 和 tryScan 两个预览用的函数。</p>
<p>函数的主要原理是：先记住当前标记和扫描的位置，然后执行新的扫描，读取到后续标记内容后，再还原成之前保存的状态。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">lookAhead</span>&lt;<span class="title">T</span>&gt;(<span class="params">callback: () =&gt; T</span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> speculationHelper(callback, <span class="comment">/*isLookahead*/</span> <span class="literal">true</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">tryScan</span>&lt;<span class="title">T</span>&gt;(<span class="params">callback: () =&gt; T</span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> speculationHelper(callback, <span class="comment">/*isLookahead*/</span> <span class="literal">false</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">speculationHelper</span>&lt;<span class="title">T</span>&gt;(<span class="params">callback: () =&gt; T, isLookahead: <span class="built_in">boolean</span></span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> savePos = pos;</span><br><span class="line">    <span class="keyword">const</span> saveStartPos = startPos;</span><br><span class="line">    <span class="keyword">const</span> saveTokenPos = tokenPos;</span><br><span class="line">    <span class="keyword">const</span> saveToken = token;</span><br><span class="line">    <span class="keyword">const</span> saveTokenValue = tokenValue;</span><br><span class="line">    <span class="keyword">const</span> saveTokenFlags = tokenFlags;</span><br><span class="line">    <span class="keyword">const</span> result = callback();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// If our callback returned something &#x27;falsy&#x27; or we&#x27;re just looking ahead,</span></span><br><span class="line">    <span class="comment">// then unconditionally restore us to where we were.</span></span><br><span class="line">    <span class="keyword">if</span> (!result || isLookahead) &#123;</span><br><span class="line">        pos = savePos;</span><br><span class="line">        startPos = saveStartPos;</span><br><span class="line">        tokenPos = saveTokenPos;</span><br><span class="line">        token = saveToken;</span><br><span class="line">        tokenValue = saveTokenValue;</span><br><span class="line">        tokenFlags = saveTokenFlags;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>lookAhead 和 tryScan 的唯一区别是：lookAhead 会始终还原到原始状态，而 tryScan 则允许不还原。</p>
<h2 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h2><p>本节主要介绍了扫描器的具体实现。扫描器提供了以下接口：</p>
<ul>
<li>scan() 扫描下一个标记</li>
<li>getXXX() 获取当前标记信息</li>
<li>reScanXXX() 重新扫描标记</li>
<li>lookAhead() 预览标记</li>
</ul>
<p>如果你觉得理解起来比较吃力，那告诉你个不幸的消息——词法扫描是所有流程中最简单的。</p>
<p>有些人可能想要开发自己的编译器，这里给个提示，如果你设计的语言采用缩进式语法，你在实现词法扫描步骤中，需要记录每个标记之前的缩进数（TAB 按一个缩进处理）。如果这个标记不在行首，缩进数记位 -1。在语法解析阶段，如果发现下一个标记的缩进比当前存储的缩进大，说明增加了缩进，更新当前存储的缩进。</p>
<p>TS 源码中的词法扫描是比较复杂但完整的一种实现，如果仅仅为了语法高亮，这点复杂的没必要的，对语法高亮来说，使用正则匹配已经足够了，这是另一种词法扫描方案。</p>
<p>TS 这部分源码有 2000 行多，相信领悟文中介绍的方法、概念之后，你可以自己读完这些源码。</p>
<h1 id="4-语法1-语法树"><a href="#4-语法1-语法树" class="headerlink" title="4.语法1-语法树"></a>4.语法1-语法树</h1><p>上一节介绍了标记的解析，就相当于识别了一句话里有哪些词语，接下来就是把这些词语组成完整的句子，即拼装标记为语法树。</p>
<h2 id="树（tree）"><a href="#树（tree）" class="headerlink" title="树（tree）"></a>树（tree）</h2><p>树是计算机数据结构里的专业术语。就像一个学校有很多年级，每个年级下面有很多班，每个班级下面有很多学生，这种组织结构就叫树。</p>
<ul>
<li>组成树的每个部分称为节点（Node）；</li>
<li>最顶层的节点（即例子中的学校）称为根节点（Root Node）；</li>
<li>和每个节点的下级节点称为这个节点的子节点(Child Node，注意不叫 Subnode)（班级是年级的子节点）；</li>
<li>反过来，每个节点的上级节点称为这个节点的父节点(Parent node)（年级是班级的父节点）；</li>
<li>一个节点的子节点以及子节点的子节点统称为这个节点的后代节点（Descendant node）；</li>
<li>一个节点的父节点以及父节点的父节点统称为这个节点的祖父节点（Ancestor node）。</li>
</ul>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629084501.png" alt="img"></p>
<p>很多人一提到树就想起二叉树，说明你压根不懂什么是树。二叉树只是树的一种。二叉树被用的最多的地方在试卷，请忘掉这个词。</p>
<p>从树中的任一个节点开始，都可以遍历这个节点的所有后代节点。因为节点不会出现循环关系，所以遍历树也不会出现死循环。 </p>
<p>遍历节点的顺序有有很多，没特别说明的话，是按照先父节点、再子节点，同级节点则从左到右的顺序（图中编号顺序）。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629084540.png" alt="img"></p>
<h2 id="语法树（Syntax-Tree）"><a href="#语法树（Syntax-Tree）" class="headerlink" title="语法树（Syntax Tree）"></a>语法树（Syntax Tree）</h2><p>语法树用于表示解析之后的代码结构的一种树。</p>
<p>比如以下代码解析后的语法树如图：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = [<span class="string">&#x27;l&#x27;</span>, [<span class="number">100</span>]]</span><br><span class="line"><span class="keyword">if</span> (x) &#123;</span><br><span class="line">    foo(x)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629084704.png" alt="img"></p>
<p>其中，源文件(Source File)是语法树的根节点。</p>
<p>语法树中有很多种类的节点，根据种类的不同，这些节点的子节点种类也会变化。比如：</p>
<ul>
<li>“if 语句”节点，只有“条件表达式”、“则部分”和“否则部分”(可能为空)三个子节点。</li>
<li>“双目表达式(x + y)”节点，只有“左值表达式”和“右值表达式”两个子节点。</li>
</ul>
<p>TypeScript 中，节点有约 100 种，它们都继承 “Node” 接口：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">export</span> <span class="keyword">interface</span> Node <span class="keyword">extends</span> TextRange &#123;</span><br><span class="line">     kind: SyntaxKind;</span><br><span class="line">     flags: NodeFlags;</span><br><span class="line">     parent: Node;</span><br><span class="line">     <span class="comment">//  ...(略)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Node 接口中 kind 枚举用于标记这个节点的种类。</p>
<p>TypeScript 将表示标记种类的枚举和表示节点种类的枚举合并成一个了（这可能也是导致很多人读不懂代码的原因之一）：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="built_in">enum</span> SyntaxKind &#123;</span><br><span class="line">    <span class="comment">// ...(略)</span></span><br><span class="line">    TemplateSpan,</span><br><span class="line">    SemicolonClassElement,</span><br><span class="line">    <span class="comment">// Element</span></span><br><span class="line">    Block,</span><br><span class="line">    EmptyStatement,</span><br><span class="line">    VariableStatement,</span><br><span class="line">    ExpressionStatement,</span><br><span class="line">    IfStatement,</span><br><span class="line">    DoStatement,</span><br><span class="line">    WhileStatement,</span><br><span class="line">    ForStatement,</span><br><span class="line">    ForInStatement,</span><br><span class="line">    ForOfStatement,</span><br><span class="line">    ContinueStatement,</span><br><span class="line">    BreakStatement,</span><br><span class="line">    <span class="comment">// ...(略)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如果你深知“学而不思则罔”的道理，现在应该会思考这样一个问题：那到底有哪 100 种语法节点呢？</p>
<p>这里先推荐一个工具：<a target="_blank" rel="noopener" href="https://astexplorer.net/">https://astexplorer.net/</a></p>
<p>这个工具可以在左侧输入代码，右侧查看实时生成的语法树（以 JSON 方式展示）。读者可以在这个工具顶部选择“JavaScript”语言和“typescript”编译器，查看 TypeScript 生成的语法树结构。</p>
<p>为了帮助英文文盲们更好地理解语法类型，读者可参考：<a target="_blank" rel="noopener" href="https://github.com/meriyah/meriyah/wiki/ESTree-Node-Types-Table">https://github.com/meriyah/meriyah/wiki/ESTree-Node-Types-Table</a></p>
<h2 id="语法节点分类"><a href="#语法节点分类" class="headerlink" title="语法节点分类"></a>语法节点分类</h2><p>虽然语法节点种类很多，但其实只有四类：</p>
<ol>
<li>类型节点（Type Node）：一般出现在“:”后面（var a: 类型节点)，可以解析为一个类型。</li>
<li>表达式节点（Expression）：可以计算得到一个值的节点，表达式节点只能依附于一个语句节点，不能独立使用。</li>
<li>语句节点（Statement）：可以直接在最外层使用的节点，俗称的几行代码就是指几个语句节点。</li>
<li>其它节点：其它内嵌在表达式或语句节点的特定节点，比如 case 节点。</li>
</ol>
<p>在 TypeScript 中，节点命名比较规范，一般类型节点以 TypeNode 结尾；表达式节点以 Expression 结尾；语句节点以 Statement 结尾。</p>
<p>比如 if 语句节点：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> IfStatement <span class="keyword">extends</span> Statement &#123;</span><br><span class="line">    kind: SyntaxKind.IfStatement;</span><br><span class="line">    expression: Expression;</span><br><span class="line">    thenStatement: Statement;</span><br><span class="line">    elseStatement?: Statement;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>鉴于有些读者对部分语法比较陌生，这里可以说明一些可能未正确理解的节点类型</p>
<h3 id="表达式语句（ExpressionStatement）"><a href="#表达式语句（ExpressionStatement）" class="headerlink" title="表达式语句（ExpressionStatement）"></a>表达式语句（ExpressionStatement）</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> ExpressionStatement <span class="keyword">extends</span> Statement, JSDocContainer &#123;</span><br><span class="line">    kind: SyntaxKind.ExpressionStatement;</span><br><span class="line">    expression: Expression;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>表达式是不能直接出现在最外层的，但以下代码是允许的：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line"><span class="number">1</span> + <span class="number">1</span>; <span class="comment">// 这是表达式</span></span><br></pre></td></tr></table></figure>

<p>因为 1 + 1 是表达式，它们同时又是一个表达式语句。所以以上代码的语法树如图：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629230149.png" alt="img"></p>
<p>常见的赋值、函数调用语句都其实是一个表达式语句。</p>
<h3 id="块语句（BlockStatement）"><a href="#块语句（BlockStatement）" class="headerlink" title="块语句（BlockStatement）"></a>块语句（BlockStatement）</h3><p>一对“{}”本身也是一个语句，称为块语句。一个块语句可以包含若干个语句。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> Block <span class="keyword">extends</span> Statement &#123;</span><br><span class="line">    kind: SyntaxKind.Block;</span><br><span class="line">    statements: NodeArray&lt;Statement&gt;;</span><br><span class="line">    <span class="comment">/*@internal*/</span> multiLine?: <span class="built_in">boolean</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>比如 while 语句的主体只能是一条语句：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> IterationStatement <span class="keyword">extends</span> Statement &#123;</span><br><span class="line">    statement: Statement;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> WhileStatement <span class="keyword">extends</span> IterationStatement &#123;</span><br><span class="line">    kind: SyntaxKind.WhileStatement;</span><br><span class="line">    expression: Expression;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>但 while 里面明明是可以写很多语句的：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span>(x_d) &#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">120</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">100</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>本质上，当我们使用 {} 时，就已经使用了一个块语句，while 的主体仍然是一个语句：块语句。其它语句都是块语句的子节点。</p>
<h3 id="标签语句（LabeledStatement）"><a href="#标签语句（LabeledStatement）" class="headerlink" title="标签语句（LabeledStatement）"></a>标签语句（LabeledStatement）</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> LabeledStatement <span class="keyword">extends</span> Statement, JSDocContainer &#123;</span><br><span class="line">    kind: SyntaxKind.LabeledStatement;</span><br><span class="line">    label: Identifier;</span><br><span class="line">    statement: Statement;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>通过标签语句可以为语句命名，比如：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">label: <span class="keyword">var</span> x = <span class="number">120</span>;</span><br></pre></td></tr></table></figure>

<p>命名后有啥用？可以在 break 或 continue 中引用该名称，以此实现跨级 break 和 continue 的效果：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> BreakStatement <span class="keyword">extends</span> Statement &#123;</span><br><span class="line">    kind: SyntaxKind.BreakStatement;</span><br><span class="line">    label?: Identifier; <span class="comment">// 跳转的标签名</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> ContinueStatement <span class="keyword">extends</span> Statement &#123;</span><br><span class="line">    kind: SyntaxKind.ContinueStatement;</span><br><span class="line">    label?: Identifier; <span class="comment">// 跳转的标签名</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="运算符的优先级"><a href="#运算符的优先级" class="headerlink" title="运算符的优先级"></a>运算符的优先级</h3><p>比如 x + y * z 中，需要先算乘号。生成的语法树节点如下：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629231638.png" alt="img"></p>
<p>通过节点的层次关系，实现了这种优先级的效果（因为永远不会把图里的 x 和 y 先处理）。</p>
<p>因此创建语法树的同时，也就处理了优先级的问题，括号完全可以从语法树中删除。</p>
<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><p> 一个复杂的类，也能用语法树表示？</p>
<p>当然，任何语法最后都是用语法树表达的，只不过类确实复杂一些：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> Declaration <span class="keyword">extends</span> Node &#123;</span><br><span class="line">    _declarationBrand: <span class="built_in">any</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> NamedDeclaration <span class="keyword">extends</span> Declaration &#123;</span><br><span class="line">    name?: DeclarationName;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> ClassLikeDeclarationBase <span class="keyword">extends</span> NamedDeclaration, JSDocContainer &#123;</span><br><span class="line">    kind: SyntaxKind.ClassDeclaration | SyntaxKind.ClassExpression;</span><br><span class="line">    name?: Identifier;</span><br><span class="line">    typeParameters?: NodeArray&lt;TypeParameterDeclaration&gt;;</span><br><span class="line">    heritageClauses?: NodeArray&lt;HeritageClause&gt;;</span><br><span class="line">    members: NodeArray&lt;ClassElement&gt;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> ClassDeclaration <span class="keyword">extends</span> ClassLikeDeclarationBase, DeclarationStatement &#123;</span><br><span class="line">    kind: SyntaxKind.ClassDeclaration;</span><br><span class="line">    <span class="comment">/** May be undefined in `export default class &#123; ... &#125;`. */</span></span><br><span class="line">    name?: Identifier;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>类、函数、变量、导入声明严格意义上是独立的一种语法分类，但鉴于它和其它语句用法一致，为了便于理解，这里把声明作语句的一种看待。</p>
<h2 id="节点位置"><a href="#节点位置" class="headerlink" title="节点位置"></a>节点位置</h2><p>当源代码被解析成语法树后，源代码就不再需要了。如果后续流程发现一个错误，编译器需要向用户报告，并指出错误位置。</p>
<p>为了可以得到这个位置，需要将节点在源文件种的位置保存下来：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> TextRange &#123;</span><br><span class="line">    pos: <span class="built_in">number</span>;</span><br><span class="line">    end: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">interface</span> Node <span class="keyword">extends</span> TextRange &#123;</span><br><span class="line">        kind: SyntaxKind;</span><br><span class="line">        flags: NodeFlags;</span><br><span class="line">        parent: Node;</span><br><span class="line">        <span class="comment">//  ...(略)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>通过节点的 parent 可以找到节点的根节点，即所在的文件；通过节点的 pos 和 end 可以确定节点在源文件的行列号（具体已经在第二节：标记位置 中介绍）。</p>
<h2 id="遍历节点"><a href="#遍历节点" class="headerlink" title="遍历节点"></a>遍历节点</h2><p>为了方便程序中遍历任意节点，TypeScript 提供了一个工具函数：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Invokes a callback for each child of the given node. The &#x27;cbNode&#x27; callback is invoked for all child nodes</span></span><br><span class="line"><span class="comment"> * stored in properties. If a &#x27;cbNodes&#x27; callback is specified, it is invoked for embedded arrays; otherwise,</span></span><br><span class="line"><span class="comment"> * embedded arrays are flattened and the &#x27;cbNode&#x27; callback is invoked for each element. If a callback returns</span></span><br><span class="line"><span class="comment"> * a truthy value, iteration stops and that value is returned. Otherwise, undefined is returned.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>node a given node to visit its children</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>cbNode a callback to be invoked for all child nodes</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>cbNodes a callback to be invoked for embedded array</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@remarks </span>`forEachChild` must visit the children of a node in the order</span></span><br><span class="line"><span class="comment"> * that they appear in the source code. The language service depends on this property to locate nodes by position.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">forEachChild</span>&lt;<span class="title">T</span>&gt;(<span class="params">node: Node, cbNode: (node: Node) =&gt; T | <span class="literal">undefined</span>, cbNodes?: (nodes: NodeArray&lt;Node&gt;) =&gt; T | <span class="literal">undefined</span></span>): <span class="title">T</span> | <span class="title">undefined</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!node || node.kind &lt;= SyntaxKind.LastToken) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">switch</span> (node.kind) &#123;</span><br><span class="line">        <span class="keyword">case</span> SyntaxKind.QualifiedName:</span><br><span class="line">            <span class="keyword">return</span> visitNode(cbNode, (&lt;QualifiedName&gt;node).left) ||</span><br><span class="line">                visitNode(cbNode, (&lt;QualifiedName&gt;node).right);</span><br><span class="line">        <span class="keyword">case</span> SyntaxKind.TypeParameter:</span><br><span class="line">            <span class="keyword">return</span> visitNode(cbNode, (&lt;TypeParameterDeclaration&gt;node).name) ||</span><br><span class="line">                visitNode(cbNode, (&lt;TypeParameterDeclaration&gt;node).constraint) ||</span><br><span class="line">                visitNode(cbNode, (&lt;TypeParameterDeclaration&gt;node).default) ||</span><br><span class="line">                visitNode(cbNode, (&lt;TypeParameterDeclaration&gt;node).expression);</span><br><span class="line">        <span class="keyword">case</span> SyntaxKind.ShorthandPropertyAssignment:</span><br><span class="line">            <span class="keyword">return</span> visitNodes(cbNode, cbNodes, node.decorators) ||</span><br><span class="line">                visitNodes(cbNode, cbNodes, node.modifiers) ||</span><br><span class="line">                visitNode(cbNode, (&lt;ShorthandPropertyAssignment&gt;node).name) ||</span><br><span class="line">                visitNode(cbNode, (&lt;ShorthandPropertyAssignment&gt;node).questionToken) ||</span><br><span class="line">        <span class="comment">// ...(略)</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>forEachChild 函数只会遍历节点的直接子节点，如果用户需要递归遍历所有子节点，需要递归调用 forEachChild。forEachChild 接收一个函数用于遍历，并允许用户返回一个 true 型的值并终止循环。</p>
<h2 id="小结-2"><a href="#小结-2" class="headerlink" title="小结"></a>小结</h2><p>掌握语法树是掌握整个编译系统的基础。你应该可以深刻地知道语法树的大概样子，并清楚每种语法的语法树结构。如果还没有彻底掌握，可以使用上文推荐的工具</p>
<h1 id="5-语法2-语法解析"><a href="#5-语法2-语法解析" class="headerlink" title="5.语法2-语法解析"></a>5.语法2-语法解析</h1><p>上一节]介绍了语法树的结构，本节则介绍如何解析标记组成语法树。</p>
<p>对应的源码位于 src/compiler/parser.ts。</p>
<h2 id="入口函数"><a href="#入口函数" class="headerlink" title="入口函数"></a>入口函数</h2><p>要解析一份源码，输入当然是源码内容（字符串），同时还提供路径（用于报错）、语言版本（比如ES3 和 ES5 在有些细节不同）。</p>
<p>createSourceFile 是负责将源码解析为语法树的入口函数，用户可以直接调用：比如 ts.createSourceFile(‘&lt;stdio&gt;’, ‘var xld;’)。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">createSourceFile</span>(<span class="params">fileName: <span class="built_in">string</span>, sourceText: <span class="built_in">string</span>, languageVersion: ScriptTarget, setParentNodes = <span class="literal">false</span>, scriptKind?: ScriptKind</span>): <span class="title">SourceFile</span> </span>&#123;</span><br><span class="line">    performance.mark(<span class="string">&quot;beforeParse&quot;</span>);</span><br><span class="line">    <span class="keyword">let</span> result: SourceFile;</span><br><span class="line"></span><br><span class="line">    perfLogger.logStartParseSourceFile(fileName);</span><br><span class="line">    <span class="keyword">if</span> (languageVersion === ScriptTarget.JSON) &#123;</span><br><span class="line">        result = Parser.parseSourceFile(fileName, sourceText, languageVersion, <span class="comment">/*syntaxCursor*/</span> <span class="literal">undefined</span>, setParentNodes, ScriptKind.JSON);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        result = Parser.parseSourceFile(fileName, sourceText, languageVersion, <span class="comment">/*syntaxCursor*/</span> <span class="literal">undefined</span>, setParentNodes, scriptKind);</span><br><span class="line">    &#125;</span><br><span class="line">    perfLogger.logStopParseSourceFile();</span><br><span class="line"></span><br><span class="line">    performance.mark(<span class="string">&quot;afterParse&quot;</span>);</span><br><span class="line">    performance.measure(<span class="string">&quot;Parse&quot;</span>, <span class="string">&quot;beforeParse&quot;</span>, <span class="string">&quot;afterParse&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>入口函数内部除了某些性能测试代码，主要是调用 Parser.parseSourceFile 完成解析。</p>
<h2 id="解析源文件对象"><a href="#解析源文件对象" class="headerlink" title="解析源文件对象"></a>解析源文件对象</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">parseSourceFile</span>(<span class="params">fileName: <span class="built_in">string</span>, sourceText: <span class="built_in">string</span>, languageVersion: ScriptTarget, syntaxCursor: IncrementalParser.SyntaxCursor | <span class="literal">undefined</span>, setParentNodes = <span class="literal">false</span>, scriptKind?: ScriptKind</span>): <span class="title">SourceFile</span> </span>&#123;</span><br><span class="line">    scriptKind = ensureScriptKind(fileName, scriptKind);</span><br><span class="line">    <span class="comment">/* ...(略)... */</span></span><br><span class="line"></span><br><span class="line">    initializeState(sourceText, languageVersion, syntaxCursor, scriptKind);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> result = parseSourceFileWorker(fileName, languageVersion, setParentNodes, scriptKind);</span><br><span class="line"></span><br><span class="line">    clearState();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">initializeState</span>(<span class="params">_sourceText: <span class="built_in">string</span>, languageVersion: ScriptTarget, _syntaxCursor: IncrementalParser.SyntaxCursor | <span class="literal">undefined</span>, scriptKind: ScriptKind</span>) </span>&#123;</span><br><span class="line">    NodeConstructor = objectAllocator.getNodeConstructor();</span><br><span class="line">    TokenConstructor = objectAllocator.getTokenConstructor();</span><br><span class="line">    IdentifierConstructor = objectAllocator.getIdentifierConstructor();</span><br><span class="line">    SourceFileConstructor = objectAllocator.getSourceFileConstructor();</span><br><span class="line"></span><br><span class="line">    sourceText = _sourceText;</span><br><span class="line">    syntaxCursor = _syntaxCursor;</span><br><span class="line"></span><br><span class="line">    parseDiagnostics = [];</span><br><span class="line">    parsingContext = <span class="number">0</span>;</span><br><span class="line">    identifiers = createMap&lt;<span class="built_in">string</span>&gt;();</span><br><span class="line">    identifierCount = <span class="number">0</span>;</span><br><span class="line">    nodeCount = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">switch</span> (scriptKind) &#123;</span><br><span class="line">        <span class="keyword">case</span> ScriptKind.JS:</span><br><span class="line">        <span class="keyword">case</span> ScriptKind.JSX:</span><br><span class="line">            contextFlags = NodeFlags.JavaScriptFile;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> ScriptKind.JSON:</span><br><span class="line">            contextFlags = NodeFlags.JavaScriptFile | NodeFlags.JsonFile;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">default</span>:</span><br><span class="line">            contextFlags = NodeFlags.None;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    parseErrorBeforeNextFinishedNode = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Initialize and prime the scanner before parsing the source elements.</span></span><br><span class="line">    scanner.setText(sourceText);</span><br><span class="line">    scanner.setOnError(scanError);</span><br><span class="line">    scanner.setScriptTarget(languageVersion);</span><br><span class="line">    scanner.setLanguageVariant(getLanguageVariant(scriptKind));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如果你仔细读了这段代码，你可能会有这些疑问：</p>
<h4 id="1-NodeConstructor-等是什么"><a href="#1-NodeConstructor-等是什么" class="headerlink" title="1. NodeConstructor 等是什么"></a>1. NodeConstructor 等是什么</h4><p>你可以直接将它看成 Node 类的构造函数，new NodeConstructor 和 new Node 是一回事。那为什么不直接用 new Node? 这是一种性能优化手段。TS 设计的目的是用于任何 JS 引擎，包括浏览器、Node.js、微软自己的 JS 引擎，而 Node 代表语法树节点，数目会非常多，TS 允许针对不同的环境使用不同的 Node 类型，以达到最节约内存的效果。</p>
<h4 id="2-syntaxCursor-是什么"><a href="#2-syntaxCursor-是什么" class="headerlink" title="2. syntaxCursor 是什么"></a>2. syntaxCursor 是什么</h4><p>这是用于增量解析的对象，如果不执行增量解析，它是空的。增量解析是指如果之前已解析过一次源码，第二次解析时可以复用上次解析的结果，主要在编译器场景使用：编辑完源码后，源码要重新解析为语法树，如果通过增量解析，可以大幅减少解析次数。增量解析将在下一节中详细介绍。</p>
<h4 id="3-identifiers-是什么"><a href="#3-identifiers-是什么" class="headerlink" title="3. identifiers 是什么"></a>3. identifiers 是什么</h4><p>一般地，我们认为：源码中的单词都会用两次以上（变量名总会有定义和使用的时候，这里就有两次），如果将相同内容的字符串共用相同的引用，可以节约内存。identifiers 就保存了每个字符串内存的唯一引用。</p>
<h4 id="4-parsingContext-是什么"><a href="#4-parsingContext-是什么" class="headerlink" title="4. parsingContext 是什么"></a>4. parsingContext 是什么</h4><p>用于指代当前解析所在的标记位，比如当前函数是否有 async，这样可以判断 await 是否合法。</p>
<h4 id="5-parseErrorBeforeNextFinishedNode-是什么"><a href="#5-parseErrorBeforeNextFinishedNode-是什么" class="headerlink" title="5. parseErrorBeforeNextFinishedNode 是什么"></a>5. parseErrorBeforeNextFinishedNode 是什么</h4><p>每个语法树节点，都通过 createNode 创建，然后结束时会调用 finishNode，如果在解析一个语法树节点时出现错误（可能是词法扫描错误、也可能是语法错误），都会把 parseErrorBeforeNextFinishedNode 改成 true，在 finishNode 中会判断这个变量，然后标记这个语法树节点存在语法错误。TypeScript 比其它语法解析器强大的地方在于碰到语法错误后并不会终止解析，而是尝试修复源码。（因为在编辑器环境，不可能因为存在错误就停止自动补全）。这里标记节点语法错误，是为了下次增量解析时禁止重用此节点。</p>
<h2 id="解析过程"><a href="#解析过程" class="headerlink" title="解析过程"></a>解析过程</h2><p>虽然这篇文章叫 TypeScript 源码解读，但其实主要是介绍编译器的实现原理，知道了这些原理，无论什么语言的编译器你都能弄明白，反过来如果你之前没有什么基础想要自己读懂 TypeScript，那是很难的。源码就像水果，你需要自己剥；这篇文章就像果汁，营养吸收地更快。插图是展示原理的最好方式，因此文中会包含大量的插图，如果你现在读的这个网页是纯文字，一张插图都没有，那么这个网站就是盗版侵权的，请重新百度。原版都是有插图的，插图可以让你快速理解原理！这类文章目前不止中文版的稀缺，英文版的同样稀缺，毕竟了解编译原理、且真正能开发出语言的人是非常少的。有兴趣读这些文章的也绝不是只知道搬砖赚钱的菜鸟，请支持原版！</p>
<p>解析器每次读取一个标记，并根据这个标记判断接下来是什么语法，比如碰到 if 就知道是 if 语句，碰到 var 知道是变量声明。</p>
<p>当发现 if 之后，根据 if 语句的定义，接下来会强制读取一个 “(” 标记，如果读不到就报错：语法错误，缺少“(”。读完 “(” 后解析一个表达式，然后再解析一个“)”，然后再解析一个语句，如果这时接下来发现一个 else，就继续读一个语句，否则直接终止，然后重新判断下一个标记的语法。 </p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210629233823.png" alt="img"></p>
<p>if 语句的语法定义是这样的：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">IfStatement:</span><br><span class="line">    <span class="keyword">if</span> ( Expression ) Statement</span><br><span class="line">    <span class="keyword">if</span> ( Expression ) Statement <span class="keyword">else</span> Statement</span><br></pre></td></tr></table></figure>

<p>这个定义的意思是：if 语句(IfStatement)有两种语法，当然无论哪种，开头都是 if ( Expression ) Statement</p>
<p>为什么是这样定义的呢，这是因为JS是遵守ECMA-262规范的，而ECMA-262规范就像一种协议，规定了 if 语句要怎么定义。</p>
<p>ECMA-262 规范也有很多版本，熟悉的ES3,ES5,ES6 这些其实就是这个规范的版本。ES10的版本可以在这里查看：<a target="_blank" rel="noopener" href="http://www.ecma-international.org/ecma-262/10.0/index.html#sec-grammar-summary">http://www.ecma-international.org/ecma-262/10.0/index.html#sec-grammar-summary</a></p>
<h2 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h2><p>源文件由语句组成，首先读取下一个标记（nextToken）；然后解析语句列表（parseList, parseStatement）</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parseSourceFileWorker</span>(<span class="params">fileName: <span class="built_in">string</span>, languageVersion: ScriptTarget, setParentNodes: <span class="built_in">boolean</span>, scriptKind: ScriptKind</span>): <span class="title">SourceFile</span> </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> isDeclarationFile = isDeclarationFileName(fileName);</span><br><span class="line"></span><br><span class="line">    sourceFile = createSourceFile(fileName, languageVersion, scriptKind, isDeclarationFile);</span><br><span class="line">    sourceFile.flags = contextFlags;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Prime the scanner.</span></span><br><span class="line">    nextToken();</span><br><span class="line">    <span class="comment">// A member of ReadonlyArray&lt;T&gt; isn&#x27;t assignable to a member of T[] (and prevents a direct cast) - but this is where we set up those members so they can be readonly in the future</span></span><br><span class="line">    processCommentPragmas(sourceFile <span class="keyword">as</span> &#123;&#125; <span class="keyword">as</span> PragmaContext, sourceText);</span><br><span class="line">    processPragmasIntoFields(sourceFile <span class="keyword">as</span> &#123;&#125; <span class="keyword">as</span> PragmaContext, reportPragmaDiagnostic);</span><br><span class="line"></span><br><span class="line">    sourceFile.statements = parseList(ParsingContext.SourceElements, parseStatement);</span><br><span class="line">    Debug.assert(token() === SyntaxKind.EndOfFileToken);</span><br><span class="line">    sourceFile.endOfFileToken = addJSDocComment(parseTokenNode());</span><br><span class="line"></span><br><span class="line">    setExternalModuleIndicator(sourceFile);</span><br><span class="line"></span><br><span class="line">    sourceFile.nodeCount = nodeCount;</span><br><span class="line">    sourceFile.identifierCount = identifierCount;</span><br><span class="line">    sourceFile.identifiers = identifiers;</span><br><span class="line">    sourceFile.parseDiagnostics = parseDiagnostics;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (setParentNodes) &#123;</span><br><span class="line">        fixupParentReferences(sourceFile);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> sourceFile;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">reportPragmaDiagnostic</span>(<span class="params">pos: <span class="built_in">number</span>, end: <span class="built_in">number</span>, diagnostic: DiagnosticMessage</span>) </span>&#123;</span><br><span class="line">        parseDiagnostics.push(createFileDiagnostic(sourceFile, pos, end, diagnostic));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>解析一个语句：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parseStatement</span>(<span class="params"></span>): <span class="title">Statement</span> </span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (token()) &#123;</span><br><span class="line">        <span class="keyword">case</span> SyntaxKind.SemicolonToken:</span><br><span class="line">            <span class="keyword">return</span> parseEmptyStatement();</span><br><span class="line">        <span class="keyword">case</span> SyntaxKind.OpenBraceToken:</span><br><span class="line">            <span class="keyword">return</span> parseBlock(<span class="comment">/*ignoreMissingOpenBrace*/</span> <span class="literal">false</span>);</span><br><span class="line">        <span class="keyword">case</span> SyntaxKind.VarKeyword:</span><br><span class="line">            <span class="keyword">return</span> parseVariableStatement(&lt;VariableStatement&gt;createNodeWithJSDoc(SyntaxKind.VariableDeclaration));</span><br><span class="line">        <span class="comment">// ...(略)</span></span><br><span class="line">    &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<p>规则很简单：</p>
<p>先看现在标记是什么，比如是 var，说明是一个 var 语句，那就继续解析 var 语句:</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parseVariableStatement</span>(<span class="params">node: VariableStatement</span>): <span class="title">VariableStatement</span> </span>&#123;</span><br><span class="line">    node.kind = SyntaxKind.VariableStatement;</span><br><span class="line">    node.declarationList = parseVariableDeclarationList(<span class="comment">/*inForStatementInitializer*/</span> <span class="literal">false</span>);</span><br><span class="line">    parseSemicolon();</span><br><span class="line">    <span class="keyword">return</span> finishNode(node);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>var 语句的解析过程为先解析一个声明列表，然后解析分号（parseSemicolon）</p>
<p>再看一个 while 语句的解析：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parseWhileStatement</span>(<span class="params"></span>): <span class="title">WhileStatement</span> </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> node = &lt;WhileStatement&gt;createNode(SyntaxKind.WhileStatement);</span><br><span class="line">    parseExpected(SyntaxKind.WhileKeyword);  <span class="comment">// while</span></span><br><span class="line">    parseExpected(SyntaxKind.OpenParenToken); <span class="comment">// (</span></span><br><span class="line">    node.expression = allowInAnd(parseExpression); <span class="comment">// *Expession*</span></span><br><span class="line">    parseExpected(SyntaxKind.CloseParenToken); <span class="comment">// )</span></span><br><span class="line">    node.statement = parseStatement(); <span class="comment">// *Statement*</span></span><br><span class="line">    <span class="keyword">return</span> finishNode(node);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>所谓语法解析，就是把每个不同的语法都这样解析一次，然后得到语法树。</p>
<p>其中，最复杂的应该是解析列表（parseList）：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Parses a list of elements</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">parseList</span>&lt;<span class="title">T</span> <span class="title">extends</span> <span class="title">Node</span>&gt;(<span class="params">kind: ParsingContext, parseElement: () =&gt; T</span>): <span class="title">NodeArray</span>&lt;<span class="title">T</span>&gt; </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> saveParsingContext = parsingContext;</span><br><span class="line">    parsingContext |= <span class="number">1</span> &lt;&lt; kind;</span><br><span class="line">    <span class="keyword">const</span> list = [];</span><br><span class="line">    <span class="keyword">const</span> listPos = getNodePos();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">while</span> (!isListTerminator(kind)) &#123;</span><br><span class="line">        <span class="keyword">if</span> (isListElement(kind, <span class="comment">/*inErrorRecovery*/</span> <span class="literal">false</span>)) &#123;</span><br><span class="line">            <span class="keyword">const</span> element = parseListElement(kind, parseElement);</span><br><span class="line">            list.push(element);</span><br><span class="line"></span><br><span class="line">            <span class="keyword">continue</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (abortParsingListOrMoveToNextToken(kind)) &#123;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    parsingContext = saveParsingContext;</span><br><span class="line">    <span class="keyword">return</span> createNodeArray(list, listPos);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>parseList 的核心就是一个循环，只要列表没有结束，就一直解析同一种语法。</p>
<p>比如解析参数列表，碰到“)”表示列表结束，否则一直解析“参数”；比如解析数组表达式，碰到“]”结束。</p>
<p>如果理论接下来应该解析参数时，但下一个标记又不是参数，则会出现语法错误，但接下来应该解析解析参数，还是不再继续参数列表，这时候用 abortParsingListOrMoveToNextToken 判断。</p>
<p>其中，kind: ParsingContext 用于区分不同的列表（是参数，还是数组？或者别的？）</p>
<h3 id="列表结束"><a href="#列表结束" class="headerlink" title="列表结束"></a>列表结束</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// True if positioned at a list terminator</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isListTerminator</span>(<span class="params">kind: ParsingContext</span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (token() === SyntaxKind.EndOfFileToken) &#123;</span><br><span class="line">        <span class="comment">// Being at the end of the file ends all lists.</span></span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">switch</span> (kind) &#123;</span><br><span class="line">        <span class="keyword">case</span> ParsingContext.BlockStatements:</span><br><span class="line">        <span class="keyword">case</span> ParsingContext.SwitchClauses:</span><br><span class="line">        <span class="keyword">case</span> ParsingContext.TypeMembers:</span><br><span class="line">            <span class="keyword">return</span> token() === SyntaxKind.CloseBraceToken;</span><br><span class="line">        <span class="comment">// ...(略)</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>总结：对于有括号的标记，只有碰到右半括号，才能停止解析，其它的比如继承列表(extends A, B, C) 碰到 “{” 就结束。</p>
<h3 id="解析元素"><a href="#解析元素" class="headerlink" title="解析元素"></a>解析元素</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parseListElement</span>&lt;<span class="title">T</span> <span class="title">extends</span> <span class="title">Node</span>&gt;(<span class="params">parsingContext: ParsingContext, parseElement: () =&gt; T</span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> node = currentNode(parsingContext);</span><br><span class="line">    <span class="keyword">if</span> (node) &#123;</span><br><span class="line">        <span class="keyword">return</span> &lt;T&gt;consumeNode(node);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> parseElement();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这里本质是使用了 parseElement，其它代码是为了增量解析（后面详解）</p>
<h3 id="继续列表"><a href="#继续列表" class="headerlink" title="继续列表"></a>继续列表</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">abortParsingListOrMoveToNextToken</span>(<span class="params">kind: ParsingContext</span>) </span>&#123;</span><br><span class="line">    parseErrorAtCurrentToken(parsingContextErrors(kind));</span><br><span class="line">    <span class="keyword">if</span> (isInSomeParsingContext()) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    nextToken();</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// True if positioned at element or terminator of the current list or any enclosing list</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isInSomeParsingContext</span>(<span class="params"></span>): <span class="title">boolean</span> </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> kind = <span class="number">0</span>; kind &lt; ParsingContext.Count; kind++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (parsingContext &amp; (<span class="number">1</span> &lt;&lt; kind)) &#123; <span class="comment">// 只要是任意一种上下文</span></span><br><span class="line">            <span class="keyword">if</span> (isListElement(kind, <span class="comment">/*inErrorRecovery*/</span> <span class="literal">true</span>) || isListTerminator(kind)) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>总结：如果接下来的标记是合法的元素，就继续解析，此时解析器认为用户只是忘打逗号之类的分隔符。如果不是说明这个列表根本就是有问题的，不再继续犯错。</p>
<p>上面重点介绍了 if 的语法，其它都大同小异，就不再介绍。</p>
<p>现在你应该知道语法树产生的大致过程了，如果仍不懂的，可在此处停顿往回复习，并对照源码，加以理解。</p>
<h2 id="语法上下文"><a href="#语法上下文" class="headerlink" title="语法上下文"></a>语法上下文</h2><p>有些语法的使用是有要求的，比如 await 只在 async 函数内部才作关键字。</p>
<p>源码中用闭包内全局的变量存储这些信息。思路是：先设置允许 await 标记位，然后解析表达式（这时标记位已设置成允许 await），解析完成则清除标记位。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doInAwaitContext</span>&lt;<span class="title">T</span>&gt;(<span class="params">func: () =&gt; T</span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> doInsideOfContext(NodeFlags.AwaitContext, func);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doInsideOfContext</span>&lt;<span class="title">T</span>&gt;(<span class="params">context: NodeFlags, func: () =&gt; T</span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="comment">// contextFlagsToSet will contain only the context flags that</span></span><br><span class="line">    <span class="comment">// are not currently set that we need to temporarily enable.</span></span><br><span class="line">    <span class="comment">// We don&#x27;t just blindly reset to the previous flags to ensure</span></span><br><span class="line">    <span class="comment">// that we do not mutate cached flags for the incremental</span></span><br><span class="line">    <span class="comment">// parser (ThisNodeHasError, ThisNodeOrAnySubNodesHasError, and</span></span><br><span class="line">    <span class="comment">// HasAggregatedChildData).</span></span><br><span class="line">    <span class="keyword">const</span> contextFlagsToSet = context &amp; ~contextFlags;</span><br><span class="line">    <span class="keyword">if</span> (contextFlagsToSet) &#123;</span><br><span class="line">        <span class="comment">// set the requested context flags</span></span><br><span class="line">        setContextFlag(<span class="comment">/*val*/</span> <span class="literal">true</span>, contextFlagsToSet);</span><br><span class="line">        <span class="keyword">const</span> result = func();</span><br><span class="line">        <span class="comment">// reset the context flags we just set</span></span><br><span class="line">        setContextFlag(<span class="comment">/*val*/</span> <span class="literal">false</span>, contextFlagsToSet);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// no need to do anything special as we are already in all of the requested contexts</span></span><br><span class="line">    <span class="keyword">return</span> func();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这也是为什么规范中每个语法名称后面都带了一个小括号的原因：表示此处的表达式是否包括 await 这样的意义。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">IfStatement[Yield, Await, Return]:</span><br><span class="line">   <span class="keyword">if</span> ( Expression[+In, ?Yield, ?Await] ) Statement[?Yield, ?Await, ?Return] <span class="keyword">else</span> Statement[?Yield, ?Await, ?Return]</span><br><span class="line">   <span class="keyword">if</span> ( Expression[+In, ?Yield, ?Await] ) Statement[?Yield, ?Await, ?Return]</span><br></pre></td></tr></table></figure>

<p>其中，+In 表示允许 in 标记，?yield 表示 yield 标记保持不变，- in 表示禁止 in 标记。</p>
<p>通过上下文语法，下面这样的代码是不允许的：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> x = key <span class="keyword">in</span> item; x; ) &#123;</span><br><span class="line">      </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>(虽然 in 是本身也是可以直接使用的运算符，但不能用于 for 的初始值，否则按 for..in 解析。）</p>
<h2 id="后瞻（lookahead"><a href="#后瞻（lookahead" class="headerlink" title="后瞻（lookahead)"></a>后瞻（lookahead)</h2><p>上面举的例子，都是可以通过第一个标记就可以确定后面的语法（比如碰到 if 就按 if 语句处理）。那有没可能只看第一个标记无法确定之后的语法呢？</p>
<p>早期的 JS 版本是没有的（毕竟这样编译器做起来简单），但随着 JS 功能不断增加，就出现了这样的情况。</p>
<p>比如直接 x 是变量，如果后面有箭头， x =&gt;，就成了参数。</p>
<p>这时需要用到语法后瞻，所谓的后瞻就是提前看一下后面的标记，然后决定。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** Invokes the provided callback then unconditionally restores the parser to the state it</span></span><br><span class="line"><span class="comment"> * was in immediately prior to invoking the callback.  The result of invoking the callback</span></span><br><span class="line"><span class="comment"> * is returned from this function.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">lookAhead</span>&lt;<span class="title">T</span>&gt;(<span class="params">callback: () =&gt; T</span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> speculationHelper(callback, <span class="comment">/*isLookAhead*/</span> <span class="literal">true</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">speculationHelper</span>&lt;<span class="title">T</span>&gt;(<span class="params">callback: () =&gt; T, isLookAhead: <span class="built_in">boolean</span></span>): <span class="title">T</span> </span>&#123;</span><br><span class="line">    <span class="comment">// Keep track of the state we&#x27;ll need to rollback to if lookahead fails (or if the</span></span><br><span class="line">    <span class="comment">// caller asked us to always reset our state).</span></span><br><span class="line">    <span class="keyword">const</span> saveToken = currentToken;</span><br><span class="line">    <span class="keyword">const</span> saveParseDiagnosticsLength = parseDiagnostics.length;</span><br><span class="line">    <span class="keyword">const</span> saveParseErrorBeforeNextFinishedNode = parseErrorBeforeNextFinishedNode;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Note: it is not actually necessary to save/restore the context flags here.  That&#x27;s</span></span><br><span class="line">    <span class="comment">// because the saving/restoring of these flags happens naturally through the recursive</span></span><br><span class="line">    <span class="comment">// descent nature of our parser.  However, we still store this here just so we can</span></span><br><span class="line">    <span class="comment">// assert that invariant holds.</span></span><br><span class="line">    <span class="keyword">const</span> saveContextFlags = contextFlags;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// If we&#x27;re only looking ahead, then tell the scanner to only lookahead as well.</span></span><br><span class="line">    <span class="comment">// Otherwise, if we&#x27;re actually speculatively parsing, then tell the scanner to do the</span></span><br><span class="line">    <span class="comment">// same.</span></span><br><span class="line">    <span class="keyword">const</span> result = isLookAhead</span><br><span class="line">        ? scanner.lookAhead(callback)</span><br><span class="line">        : scanner.tryScan(callback);</span><br><span class="line"></span><br><span class="line">    Debug.assert(saveContextFlags === contextFlags);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// If our callback returned something &#x27;falsy&#x27; or we&#x27;re just looking ahead,</span></span><br><span class="line">    <span class="comment">// then unconditionally restore us to where we were.</span></span><br><span class="line">    <span class="keyword">if</span> (!result || isLookAhead) &#123;</span><br><span class="line">        currentToken = saveToken;</span><br><span class="line">        parseDiagnostics.length = saveParseDiagnosticsLength;</span><br><span class="line">        parseErrorBeforeNextFinishedNode = saveParseErrorBeforeNextFinishedNode;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>说的比较简单，具体实现稍微麻烦：如果预览的时候发现标记错误咋办？所以需要先记住当前的错误信息，然后使用扫描器的预览功能读取之后的标记，之后完全恢复到之前的状态。</p>
<p>TypeScript 中有哪些语法要后瞻呢？</p>
<ul>
<li>&lt;T&gt; 可能是类型转换（&lt;any&gt;x）、箭头函数( &lt;T&gt; x =&gt; {}）或 JSX （&lt;T&gt;X&lt;/T&gt;）</li>
<li>public 可能是修饰符(public class A {})，或变量（public++）</li>
<li>type 在后面跟标识符时才是别名类型，否则作变量</li>
<li>let 只有在后面跟标识符时才是变量声明，否则是变量，但 let let = 1 是不对的。</li>
</ul>
<p>可以看到语法后瞻增加了编译器的复杂度，也浪费了一些性能。</p>
<p>虽然语法设计者尽量避免出现这样的后瞻，但还是有一些地方，因为兼容问题不得不采用这个方案。</p>
<h2 id="语法歧义"><a href="#语法歧义" class="headerlink" title="语法歧义"></a>语法歧义</h2><h3 id="的歧义"><a href="#的歧义" class="headerlink" title="/ 的歧义"></a>/ 的歧义</h3><p>之前提到的 / 可能是除号或正则表达式，在词法阶段还无法分析，但在语法解析阶段，因为已知道现在需要什么语法，可以正确地处理这个符号。</p>
<p>比如需要表达式的时候，碰到 /，因为 / 不能是表达式的开头，只能把 / 重新按正则表达式标记解析。如果在表达式后面碰到 /，那就作除号。</p>
<p>但也有些歧义是语法解析阶段都很难处理的。</p>
<h3 id="lt-的歧义"><a href="#lt-的歧义" class="headerlink" title="&lt; 的歧义"></a>&lt; 的歧义</h3><p>比如 call&lt;number, any&gt;(x)，你可能觉得是调用 call 泛型函数（参数 x），但它也可以理解成： (call &lt; number) , (any &gt; (x))</p>
<p>所有支持泛型的C风格语言都有类似的问题，多数编译器的做法是：和你想的一样，按泛型看，毕竟一般人很少在 &gt; 后面写括号。</p>
<p>在 TS 设计之初，&lt;T&gt;x 是表示类型转换的，这个设计源于 C。但后来为了支持 JSX，这个语法就和 JSX 彻底冲突了。</p>
<p>因此 TS 选择的方案是：引入 as 语法，&lt;T&gt;x 和 x as T 完全相同。同时引入 tsx 扩展名，在 tsx 中，&lt;T&gt; 当 JSX，在普通 ts，&lt;T&gt; 依然是类型转换（为兼容）。</p>
<h2 id="插入分号"><a href="#插入分号" class="headerlink" title="插入分号"></a>插入分号</h2><p>JS 一向允许省略分号，在需要解析分号的地方判断后面的标记是否是“}”，或包含空行。 </p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">canParseSemicolon</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// If there&#x27;s a real semicolon, then we can always parse it out.</span></span><br><span class="line">    <span class="keyword">if</span> (token() === SyntaxKind.SemicolonToken) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// We can parse out an optional semicolon in ASI cases in the following cases.</span></span><br><span class="line">    <span class="keyword">return</span> token() === SyntaxKind.CloseBraceToken || token() === SyntaxKind.EndOfFileToken || scanner.hasPrecedingLineBreak();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="JSDoc"><a href="#JSDoc" class="headerlink" title="JSDoc"></a>JSDoc</h2><p>TS 为了尽可能兼容 JS，允许用户直接使用 JS + JSDoc 的方式备注类型，所以 JS 里的 JSDoc 注释也按源码的一部分解析。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** <span class="doctag">@type <span class="type">&#123;string&#125;</span> </span>*/</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">120</span></span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">parseIsolatedJSDocComment</span>(<span class="params">content: <span class="built_in">string</span>, start: <span class="built_in">number</span> | <span class="literal">undefined</span>, length: <span class="built_in">number</span> | <span class="literal">undefined</span></span>): </span>&#123; jsDoc: JSDoc, <span class="attr">diagnostics</span>: Diagnostic[] &#125; | <span class="literal">undefined</span> &#123;</span><br><span class="line">    initializeState(content, ScriptTarget.Latest, <span class="comment">/*_syntaxCursor:*/</span> <span class="literal">undefined</span>, ScriptKind.JS);</span><br><span class="line">    sourceFile = &lt;SourceFile&gt;&#123; <span class="attr">languageVariant</span>: LanguageVariant.Standard, <span class="attr">text</span>: content &#125;;</span><br><span class="line">    <span class="keyword">const</span> jsDoc = doInsideOfContext(NodeFlags.None, <span class="function">() =&gt;</span> parseJSDocCommentWorker(start, length));</span><br><span class="line">    <span class="keyword">const</span> diagnostics = parseDiagnostics;</span><br><span class="line">    clearState();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> jsDoc ? &#123; jsDoc, diagnostics &#125; : <span class="literal">undefined</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">parseJSDocComment</span>(<span class="params">parent: HasJSDoc, start: <span class="built_in">number</span>, length: <span class="built_in">number</span></span>): <span class="title">JSDoc</span> | <span class="title">undefined</span> </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> saveToken = currentToken;</span><br><span class="line">    <span class="keyword">const</span> saveParseDiagnosticsLength = parseDiagnostics.length;</span><br><span class="line">    <span class="keyword">const</span> saveParseErrorBeforeNextFinishedNode = parseErrorBeforeNextFinishedNode;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> comment = doInsideOfContext(NodeFlags.None, <span class="function">() =&gt;</span> parseJSDocCommentWorker(start, length));</span><br><span class="line">    <span class="keyword">if</span> (comment) &#123;</span><br><span class="line">        comment.parent = parent;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (contextFlags &amp; NodeFlags.JavaScriptFile) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!sourceFile.jsDocDiagnostics) &#123;</span><br><span class="line">            sourceFile.jsDocDiagnostics = [];</span><br><span class="line">        &#125;</span><br><span class="line">        sourceFile.jsDocDiagnostics.push(...parseDiagnostics);</span><br><span class="line">    &#125;</span><br><span class="line">    currentToken = saveToken;</span><br><span class="line">    parseDiagnostics.length = saveParseDiagnosticsLength;</span><br><span class="line">    parseErrorBeforeNextFinishedNode = saveParseErrorBeforeNextFinishedNode;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> comment;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="小结-3"><a href="#小结-3" class="headerlink" title="小结"></a>小结</h2><p>本节介绍了语法解析，并提到了 TS 如何在碰到错误后继续解析。</p>
<h1 id="6-绑定-符号"><a href="#6-绑定-符号" class="headerlink" title="6.绑定-符号"></a>6.绑定-符号</h1><p>在上一节主要介绍了语法树的解析生成。就好比电脑已经听到了“你真聪明”这句话，现在要让电脑开始思考这句话的含义——是真聪明还是假聪明。</p>
<p>这是一个非常的复杂的过程，接下来将有连续几节内容介绍实现原理，本节则主要提前介绍一些相关的概念。</p>
<h2 id="符号"><a href="#符号" class="headerlink" title="符号"></a>符号</h2><p>在代码里面，可以定义一个变量、一个函数、或者一个类，这些定义都有一个名字，然后在其它地方可以通过名字引用这个定义。</p>
<p>这些定义统称为符号（Symbol）（注意和 ES6 里的 Symbol 不相干）。</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210701081630.png" alt="img"></p>
<p>当在代码里写了一个标识符名称（变量名），这个名称一定可以解析为某个符号（可能是变量、参数、函数或其它的，可能是用户自己写的，也可能系统自带），如果无法解析，那一定是一个错误。</p>
<p>一个符号一般和一个声明节点对应，比如一个变量符号就对应一个 var 声明节点或 let/const 声明节点。</p>
<p>可能存在一个符号对应多个声明节点的情况，比如：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">A</span></span>&#123;&#125;</span><br><span class="line"><span class="keyword">interface</span> A&#123;&#125;</span><br></pre></td></tr></table></figure>

<p>同名的类和接口只产生一个符号 A，但这个符号拥有两个声明。</p>
<p>可能存在一个符号没有源声明节点的情况，比如：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> T = &#123;[key: <span class="built_in">string</span>]: <span class="built_in">any</span>&#125;</span><br></pre></td></tr></table></figure>

<p>T 有无限个成员，每个成员都是没有源声明节点的。</p>
<p>TS 中符号的定义：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> Symbol &#123;</span><br><span class="line">    flags: SymbolFlags;                     <span class="comment">// Symbol flags</span></span><br><span class="line">    escapedName: __String;                  <span class="comment">// Name of symbol</span></span><br><span class="line">    declarations: Declaration[];            <span class="comment">// Declarations associated with this symbol</span></span><br><span class="line">    valueDeclaration: Declaration;          <span class="comment">// First value declaration of the symbol</span></span><br><span class="line">    members?: SymbolTable;                  <span class="comment">// Class, interface or object literal instance members</span></span><br><span class="line">    <span class="built_in">exports</span>?: SymbolTable;                  <span class="comment">// Module exports</span></span><br><span class="line">    globalExports?: SymbolTable;            <span class="comment">// Conditional global UMD exports</span></span><br><span class="line">    <span class="comment">/* @internal */</span> id?: <span class="built_in">number</span>;            <span class="comment">// Unique id (used to look up SymbolLinks)</span></span><br><span class="line">    <span class="comment">/* @internal */</span> mergeId?: <span class="built_in">number</span>;       <span class="comment">// Merge id (used to look up merged symbol)</span></span><br><span class="line">    <span class="comment">/* @internal */</span> parent?: <span class="built_in">Symbol</span>;        <span class="comment">// Parent symbol</span></span><br><span class="line">    <span class="comment">/* @internal */</span> exportSymbol?: <span class="built_in">Symbol</span>;  <span class="comment">// Exported symbol associated with this symbol</span></span><br><span class="line">    <span class="comment">/* @internal */</span> nameType?: Type;        <span class="comment">// Type associated with a late-bound symbol</span></span><br><span class="line">    <span class="comment">/* @internal */</span> constEnumOnlyModule?: <span class="built_in">boolean</span>; <span class="comment">// True if module contains only const enums or other modules with only const enums</span></span><br><span class="line">    <span class="comment">/* @internal */</span> isReferenced?: SymbolFlags; <span class="comment">// True if the symbol is referenced elsewhere. Keeps track of the meaning of a reference in case a symbol is both a type parameter and parameter.</span></span><br><span class="line">    <span class="comment">/* @internal */</span> isReplaceableByMethod?: <span class="built_in">boolean</span>; <span class="comment">// Can this Javascript class property be replaced by a method symbol?</span></span><br><span class="line">    <span class="comment">/* @internal */</span> isAssigned?: <span class="built_in">boolean</span>;   <span class="comment">// True if the symbol is a parameter with assignments</span></span><br><span class="line">    <span class="comment">/* @internal */</span> assignmentDeclarationMembers?: <span class="built_in">Map</span>&lt;Declaration&gt;; <span class="comment">// detected late-bound assignment declarations associated with the symbol</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>其中，declarations 表示关联的源节点。valueDeclaration 则表示第一个具有值的源节点。</p>
<p>注意两者都可能为 <code>undefined</code>，源码中之所以没将它们标上 <code>?</code>，主要是因为作者懒（不然代码需要经常判断空）。</p>
<p>其中，escapedName 表示符号的名称，名称本质是字符串，TS 在源码中有一些内部的特殊符号名称，这些名称都以“__”前缀，如果用户本身就定义了名字带__的，会被转义成其它名字，所以 TS 内部将转义后的名字标记成 __String 类型，运行期间它本质还是字符串，所以不影响性能。</p>
<h2 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h2><p>允许定义符号的节点叫作用域（Scope），比如全局范围（源文件），函数，大括号。</p>
<p>在同一个作用域中，不能定义同名的符号。</p>
<p>作用域是一个树结构，查找变量时，先在就近的作用域查找，找不到就向外层查找。</p>
<p>如图共四个作用域：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210701082142.png" alt="img"></p>
<p>仔细观察会发现，if 语句不是一个作用域，但 for 语句却是。</p>
<p>语言本身就是这么设计的，因为在 for 里面可以声明变量。</p>
<h2 id="流程节点"><a href="#流程节点" class="headerlink" title="流程节点"></a>流程节点</h2><p>流程节点是执行流程图的组成部分。</p>
<p>比如 a = b &gt; c &amp;&amp; d == 3 ? e : f 的执行顺序：</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210701082208.png" alt="img"></p>
<p>由于 JS 是动态语言，变量的类型可能随执行的流程发生变化，因此在分析时需要知道整个代码的执行顺序。</p>
<p>流程节点就是拥有记录这个顺序的对象。</p>
<h3 id="开始流程"><a href="#开始流程" class="headerlink" title="开始流程"></a>开始流程</h3><p>开始流程是整个流程图的根节点。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// FlowStart represents the start of a control flow. For a function expression or arrow</span></span><br><span class="line"><span class="comment">// function, the node property references the function (which in turn has a flowNode</span></span><br><span class="line"><span class="comment">// property for the containing control flow).</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> FlowStart <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    node?: FunctionExpression | ArrowFunction | MethodDeclaration;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>代码总是从一个函数开始执行的，所以开始流程也会记录关联的函数声明。</p>
<h3 id="标签流程"><a href="#标签流程" class="headerlink" title="标签流程"></a>标签流程</h3><p>如果执行的时候出现判断，则可能从一个流程进入两个子流程，即流程跳转，跳转的目标叫标签流程：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// FlowLabel represents a junction with multiple possible preceding control flows.</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> FlowLabel <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    antecedents: FlowNode[] | <span class="literal">undefined</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>antecedents 中文意思是祖先，其实是代表执行这个流程节点的上一个父流程节点。</p>
<p>比如上图例子中，编号 5 就是一个标签流程，其父流程分别是 e 和 f 所属流程。</p>
<p>代码中的循环也是以标签流程的方式出现的。</p>
<h3 id="缩小类型范围的流程"><a href="#缩小类型范围的流程" class="headerlink" title="缩小类型范围的流程"></a>缩小类型范围的流程</h3><p>理论上，每行节点都可能对变量的类型有影响，比如上图例子中，e 所在的位置在流程上可以确认 d == 3。</p>
<p>那么 d == 3 就是一种缩小类型范围的流程，在这个流程节点后面，统一认为 d 就是 3。</p>
<p>TS 目前并不支持将所有的表达式都按缩小类型范围的流程处理，只支持特定的几种表达式，甚至有些表达式如果加了括号就不认识。</p>
<p>这主要是基于性能考虑，这样可以更少创建流程节点。</p>
<p>TS 目前支持的流程有：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// FlowAssignment represents a node that assigns a value to a narrowable reference,</span></span><br><span class="line"><span class="comment">// i.e. an identifier or a dotted name that starts with an identifier or &#x27;this&#x27;.</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> FlowAssignment <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    node: Expression | VariableDeclaration | BindingElement;</span><br><span class="line">    antecedent: FlowNode;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> FlowCall <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    node: CallExpression;</span><br><span class="line">    antecedent: FlowNode;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// FlowCondition represents a condition that is known to be true or false at the</span></span><br><span class="line"><span class="comment">// node&#x27;s location in the control flow.</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> FlowCondition <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    node: Expression;</span><br><span class="line">    antecedent: FlowNode;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> FlowSwitchClause <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    switchStatement: SwitchStatement;</span><br><span class="line">    clauseStart: <span class="built_in">number</span>;   <span class="comment">// Start index of case/default clause range</span></span><br><span class="line">    clauseEnd: <span class="built_in">number</span>;     <span class="comment">// End index of case/default clause range</span></span><br><span class="line">    antecedent: FlowNode;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// FlowArrayMutation represents a node potentially mutates an array, i.e. an</span></span><br><span class="line"><span class="comment">// operation of the form &#x27;x.push(value)&#x27;, &#x27;x.unshift(value)&#x27; or &#x27;x[n] = value&#x27;.</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> FlowArrayMutation <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    node: CallExpression | BinaryExpression;</span><br><span class="line">    antecedent: FlowNode;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id=""><a href="#" class="headerlink" title=""></a></h3><h3 id="finally-流程"><a href="#finally-流程" class="headerlink" title="finally 流程"></a>finally 流程</h3><p>try finally 流程稍微有些麻烦。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">// 1</span></span><br><span class="line">    <span class="comment">// ...(其它代码)...</span></span><br><span class="line">    <span class="comment">// 2</span></span><br><span class="line">&#125; <span class="keyword">catch</span> &#123;</span><br><span class="line">    <span class="comment">// 3</span></span><br><span class="line">    <span class="comment">// ...(其它代码)...</span></span><br><span class="line">    <span class="comment">// 4</span></span><br><span class="line">&#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    <span class="comment">// 5</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 6</span></span><br></pre></td></tr></table></figure>

<p>对于位置 5，其父流程是 1/2/3/4 (假设 try 中任何一行代码都可能报错)</p>
<p>对于位置 6，其父流程只能是 5，且此时的 5 的父流程只能是 2/4，</p>
<p>所以位置 6 的父流程节点是 finally 结束位置的节点 5，而节点 5 的父流程有两种可能：1/2/3/4 或只有 2/4</p>
<p>所以 TS 在 5 的前后插入了两个特殊的流程节点：StartFinally 和 EndFinally，</p>
<p>当遍历到 EndFinally 时，则给 StartFinally 加锁，说明此时需要的是 finally 之后的流程节点，否则说明需要的是 finally 本身的父节点</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> AfterFinallyFlow <span class="keyword">extends</span> FlowNodeBase, FlowLock &#123;</span><br><span class="line">    antecedent: FlowNode;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> PreFinallyFlow <span class="keyword">extends</span> FlowNodeBase &#123;</span><br><span class="line">    antecedent: FlowNode;</span><br><span class="line">    lock: FlowLock;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">interface</span> FlowLock &#123;</span><br><span class="line">    locked?: <span class="built_in">boolean</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>



<h3 id="综合"><a href="#综合" class="headerlink" title="综合"></a>综合</h3><p>以上所有类型的流程节点，通过父节点的方式组成一个图</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">type</span> FlowNode =</span><br><span class="line">        | AfterFinallyFlow</span><br><span class="line">        | PreFinallyFlow</span><br><span class="line">        | FlowStart</span><br><span class="line">        | FlowLabel</span><br><span class="line">        | FlowAssignment</span><br><span class="line">        | FlowCall</span><br><span class="line">        | FlowCondition</span><br><span class="line">        | FlowSwitchClause</span><br><span class="line">        | FlowArrayMutation;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">interface</span> FlowNodeBase &#123;</span><br><span class="line">    flags: FlowFlags;</span><br><span class="line">    id?: <span class="built_in">number</span>;     <span class="comment">// Node id used by flow type cache in checker</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如果将流程节点可视化，将类似地铁图，每个节点就是一个站点，站点之间的线路存在分叉，也存在合并，也存在循环。 </p>
<h3 id="自测题"><a href="#自测题" class="headerlink" title="自测题"></a>自测题</h3><p>为了帮助验证到此为止的知识点是否都已掌握，这里准备了一些题目：</p>
<ol>
<li>解释以下术语：</li>
</ol>
<ul>
<li>Token</li>
<li>Node</li>
<li>SyntaxKind</li>
<li>Symbol</li>
<li>Declaration</li>
<li>TypeNode</li>
<li>FlowNode</li>
<li>Increamentable</li>
<li>fullStart</li>
<li>Trivial</li>
</ul>
<ol start="2">
<li><p>阐述编译器从源文件到符号的流程步骤</p>
</li>
<li><p>猜测编译器在生成符号后的操作内容</p>
</li>
</ol>

    </div>

    
    
    
      
<div>
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
</div>
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/" rel="tag"><i class="fa fa-tag"></i> 编程语言</a>
              <a href="/tags/Typescript/" rel="tag"><i class="fa fa-tag"></i> Typescript</a>
              <a href="/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/" rel="tag"><i class="fa fa-tag"></i> 源码解读</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/06/25/%E5%85%AB%E8%82%A1%E6%96%87%E7%B3%BB%E5%88%97/" rel="prev" title="八股文系列">
      <i class="fa fa-chevron-left"></i> 八股文系列
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/07/18/%E9%B2%A8%E9%B1%BC%E5%93%A5%E7%9A%84%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E6%95%B4%E7%90%86/" rel="next" title="鲨鱼哥的前端面试整理">
      鲨鱼哥的前端面试整理 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-%E6%80%BB%E8%A7%88"><span class="nav-text">1.总览</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%90%86%E8%A7%A3-TypeScript-%E9%A1%B9%E7%9B%AE"><span class="nav-text">理解 TypeScript 项目</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84"><span class="nav-text">项目结构</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E8%AF%91%E6%B5%81%E7%A8%8B"><span class="nav-text">编译流程</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E7%BB%84%E8%AF%8D%E2%80%94%E2%80%94%E8%AF%8D%E6%B3%95%E5%88%86%E6%9E%90"><span class="nav-text">1. 组词——词法分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E7%BB%84%E5%8F%A5%E2%80%94%E2%80%94%E8%AF%AD%E6%B3%95%E8%A7%A3%E6%9E%90"><span class="nav-text">2. 组句——语法解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E6%8F%90%E5%8F%96%E7%AC%A6%E5%8F%B7%E8%A1%A8%E2%80%94%E2%80%94%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%88%86%E6%9E%90"><span class="nav-text">3. 提取符号表——作用域分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E6%8F%90%E5%8F%96%E6%B5%81%E7%A8%8B%E5%9B%BE%E2%80%94%E2%80%94%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90"><span class="nav-text">4. 提取流程图——流程分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E6%A3%80%E6%9F%A5%E7%B1%BB%E5%9E%8B%E9%94%99%E8%AF%AF%E2%80%94%E2%80%94%E8%AF%AD%E4%B9%89%E5%88%86%E6%9E%90"><span class="nav-text">5. 检查类型错误——语义分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E8%AF%AD%E6%B3%95%E8%BD%AC%E6%8D%A2%E2%80%94%E2%80%94%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96"><span class="nav-text">6. 语法转换——代码优化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-%E5%86%99%E5%85%A5%E6%96%87%E4%BB%B6%E2%80%94%E2%80%94%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90"><span class="nav-text">7. 写入文件——代码生成</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-%E5%B0%8F%E7%BB%93"><span class="nav-text">8. 小结</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-%E8%AF%8D%E6%B3%951-%E5%AD%97%E7%AC%A6%E5%A4%84%E7%90%86"><span class="nav-text">2.词法1-字符处理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6"><span class="nav-text">字符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CharacterCodes-%E6%9E%9A%E4%B8%BE"><span class="nav-text">CharacterCodes 枚举</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6%E5%88%A4%E6%96%AD"><span class="nav-text">字符判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%A4%E6%96%AD%E6%A0%87%E8%AF%86%E7%AC%A6%EF%BC%88Identifier%EF%BC%89"><span class="nav-text">判断标识符（Identifier）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%8C%E5%88%97%E5%8F%B7%E5%92%8C%E7%B4%A2%E5%BC%95"><span class="nav-text">行列号和索引</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-%E8%AF%8D%E6%B3%952-%E6%A0%87%E8%AE%B0%E8%A7%A3%E6%9E%90"><span class="nav-text">3.词法2-标记解析</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A0%87%E8%AE%B0%EF%BC%88Token"><span class="nav-text">标记（Token)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%AB%E6%8F%8F%E5%99%A8%EF%BC%88Scanner%EF%BC%89"><span class="nav-text">扫描器（Scanner）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%AB%E6%8F%8F%E5%99%A8%E5%AE%9E%E7%8E%B0"><span class="nav-text">扫描器实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%87%8D%E6%96%B0%E6%89%AB%E6%8F%8F%E9%97%AE%E9%A2%98"><span class="nav-text">重新扫描问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A2%84%E8%A7%88%E6%A0%87%E8%AE%B0"><span class="nav-text">预览标记</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-1"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-%E8%AF%AD%E6%B3%951-%E8%AF%AD%E6%B3%95%E6%A0%91"><span class="nav-text">4.语法1-语法树</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A0%91%EF%BC%88tree%EF%BC%89"><span class="nav-text">树（tree）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%AD%E6%B3%95%E6%A0%91%EF%BC%88Syntax-Tree%EF%BC%89"><span class="nav-text">语法树（Syntax Tree）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%AD%E6%B3%95%E8%8A%82%E7%82%B9%E5%88%86%E7%B1%BB"><span class="nav-text">语法节点分类</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A1%A8%E8%BE%BE%E5%BC%8F%E8%AF%AD%E5%8F%A5%EF%BC%88ExpressionStatement%EF%BC%89"><span class="nav-text">表达式语句（ExpressionStatement）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9D%97%E8%AF%AD%E5%8F%A5%EF%BC%88BlockStatement%EF%BC%89"><span class="nav-text">块语句（BlockStatement）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE%E8%AF%AD%E5%8F%A5%EF%BC%88LabeledStatement%EF%BC%89"><span class="nav-text">标签语句（LabeledStatement）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7"><span class="nav-text">运算符的优先级</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%B1%BB"><span class="nav-text">类</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8A%82%E7%82%B9%E4%BD%8D%E7%BD%AE"><span class="nav-text">节点位置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%81%8D%E5%8E%86%E8%8A%82%E7%82%B9"><span class="nav-text">遍历节点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-2"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-%E8%AF%AD%E6%B3%952-%E8%AF%AD%E6%B3%95%E8%A7%A3%E6%9E%90"><span class="nav-text">5.语法2-语法解析</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%A5%E5%8F%A3%E5%87%BD%E6%95%B0"><span class="nav-text">入口函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90%E6%BA%90%E6%96%87%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="nav-text">解析源文件对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-NodeConstructor-%E7%AD%89%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-text">1. NodeConstructor 等是什么</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-syntaxCursor-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-text">2. syntaxCursor 是什么</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-identifiers-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-text">3. identifiers 是什么</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-parsingContext-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-text">4. parsingContext 是什么</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-parseErrorBeforeNextFinishedNode-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-text">5. parseErrorBeforeNextFinishedNode 是什么</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90%E8%BF%87%E7%A8%8B"><span class="nav-text">解析过程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0"><span class="nav-text">代码实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%97%E8%A1%A8%E7%BB%93%E6%9D%9F"><span class="nav-text">列表结束</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E6%9E%90%E5%85%83%E7%B4%A0"><span class="nav-text">解析元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%A7%E7%BB%AD%E5%88%97%E8%A1%A8"><span class="nav-text">继续列表</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%AD%E6%B3%95%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="nav-text">语法上下文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%8E%E7%9E%BB%EF%BC%88lookahead"><span class="nav-text">后瞻（lookahead)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%AD%E6%B3%95%E6%AD%A7%E4%B9%89"><span class="nav-text">语法歧义</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9A%84%E6%AD%A7%E4%B9%89"><span class="nav-text">&#x2F; 的歧义</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#lt-%E7%9A%84%E6%AD%A7%E4%B9%89"><span class="nav-text">&lt; 的歧义</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8F%92%E5%85%A5%E5%88%86%E5%8F%B7"><span class="nav-text">插入分号</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSDoc"><span class="nav-text">JSDoc</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-3"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-%E7%BB%91%E5%AE%9A-%E7%AC%A6%E5%8F%B7"><span class="nav-text">6.绑定-符号</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%A6%E5%8F%B7"><span class="nav-text">符号</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-text">作用域</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%81%E7%A8%8B%E8%8A%82%E7%82%B9"><span class="nav-text">流程节点</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%80%E5%A7%8B%E6%B5%81%E7%A8%8B"><span class="nav-text">开始流程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE%E6%B5%81%E7%A8%8B"><span class="nav-text">标签流程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BC%A9%E5%B0%8F%E7%B1%BB%E5%9E%8B%E8%8C%83%E5%9B%B4%E7%9A%84%E6%B5%81%E7%A8%8B"><span class="nav-text">缩小类型范围的流程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link"><span class="nav-text"></span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#finally-%E6%B5%81%E7%A8%8B"><span class="nav-text">finally 流程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%BC%E5%90%88"><span class="nav-text">综合</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%87%AA%E6%B5%8B%E9%A2%98"><span class="nav-text">自测题</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="hxy"
      src="/images/Robben.gif">
  <p class="site-author-name" itemprop="name">hxy</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">80</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">120</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/huxingyi1997" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;huxingyi1997" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:huxingyi1997@zju.edu.cn" title="E-Mail → mailto:huxingyi1997@zju.edu.cn" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-frog"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">hxy</span>
</div>

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共1039.2k字</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'pQsO3ySbU4VtWN2j1FLA74Ha-gzGzoHsz',
      appKey     : 'QYacMDY2VY7Wazprg1X6FiUv',
      placeholder: "Just go go",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : false,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : false,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

  
  <!-- 动态背景特效 -->
  <!-- 樱花特效 -->
    <script async src="/js/src/sakura.js"></script>
    <script async src="/js/src/fairyDustCursor.js"></script>
</body>
</html>
